Movie
Fight Club
Godfather
Godfather II
Godfather III
Godfellas
Pulp Fiction
Scarface
Country
Australia
Brazil
Japan
United States
Font
Arial
Calibri
Cambria
Comic Sans
Consolas
Courier
Droid Sans
Georgia
Helvetica
Impact
Roboto
Segoe UI
Times New Roman
Ubuntu
Verdana
Food
Fruits
Apples
Bananas
Peaches
Oranges
Vegetables
Carrots
Cucumbers
Baked Goods
Apple Pie
Chocolate Cake
Set Pulp Fiction
<div class="field-group">
<md-input-container>
<label for="movie">Movie</label>
<md-select name="movie" id="movie" v-model="movie">
<md-option value="fight_club">Fight Club</md-option>
<md-option value="godfather">Godfather</md-option>
<md-option value="godfather_ii">Godfather II</md-option>
<md-option value="godfather_iii">Godfather III</md-option>
<md-option value="godfellas">Godfellas</md-option>
<md-option value="pulp_fiction">Pulp Fiction</md-option>
<md-option value="scarface">Scarface</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label for="country">Country</label>
<md-select name="country" id="country" v-model="country">
<md-option value="australia">Australia</md-option>
<md-option value="brazil">Brazil</md-option>
<md-option value="japan">Japan</md-option>
<md-option value="united_states">United States</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label for="font">Font</label>
<md-select name="font" id="font" v-model="font">
<md-option value="arial">Arial</md-option>
<md-option value="calibri">Calibri</md-option>
<md-option value="cambria">Cambria</md-option>
<md-option value="comic_sans" :disabled="true">Comic Sans</md-option>
<md-option value="consolas">Consolas</md-option>
<md-option value="courier">Courier</md-option>
<md-option value="droid_sans">Droid Sans</md-option>
<md-option value="georgia">Georgia</md-option>
<md-option value="helvetica">Helvetica</md-option>
<md-option value="impact">Impact</md-option>
<md-option value="roboto">Roboto</md-option>
<md-option value="segoe_ui">Segoe UI</md-option>
<md-option value="times_new_roman">Times New Roman</md-option>
<md-option value="ubuntu">Ubuntu</md-option>
<md-option value="verdana" :disabled="isDisabled">Verdana</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label for="food">Food</label>
<md-select name="food" id="food" v-model="food">
<md-subheader>Fruits</md-subheader>
<md-option value="apples">Apples</md-option>
<md-option value="bananas">Bananas</md-option>
<md-option value="peaches">Peaches</md-option>
<md-option value="oranges">Oranges</md-option>
<md-subheader>Vegetables</md-subheader>
<md-option value="carrots">Carrots</md-option>
<md-option value="cucumbers">Cucumbers</md-option>
<md-subheader>Baked Goods</md-subheader>
<md-option value="apple_pie">Apple Pie</md-option>
<md-option value="chocolate_cake">Chocolate Cake</md-option>
</md-select>
</md-input-container>
</div>
<md-button class="md-raised md-primary" @click.native="setPulpFiction">Set Pulp Fiction</md-button>
export default {
data: () => ({
movie: 'godfather',
country: '',
font: ''
}),
computed: {
isDisabled() {
return true;
}
},
methods: {
setPulpFiction() {
this.movie = 'pulp_fiction';
}
}
};
Simple multiselect
{{ option.name }}
Selected letters: {{ items }}
Multiselect with subheaders
Managers
Jim Halpert
Dwight Schrute
Michael Scott
Employees
Pam Beesly
Angela Martin
Kelly Kapoor
Ryan Howard
Kevin Malone
Creed Bratton
Oscar Nunez
Toby Flenderson
Stanley Hudson
Meredith Palmer
Phyllis Lapin-Vance
Selected users: {{ users }}
<md-input-container>
<label for="users=">Simple multiselect</label>
<md-select name="option=" id="option=" multiple v-model="items=">
<md-option v-for="option in options="
:key="option="
:value="option=">
{ { option.name } }
</md-option>
<md-select>
</md-input-container>
<div>Selected letters: {{ items }}</div>
<md-input-container>
<label for="users">Users</label>
<md-select name="users" id="users" multiple v-model="users">
<md-subheader>Managers</md-subheader>
<md-option value="jim_halpert">Jim Halpert</md-option>
<md-option value="dwight_schrute">Dwight Schrute</md-option>
<md-option value="michael_scott">Michael Scott</md-option>
<md-subheader>Employees</md-subheader>
<md-option value="pam_beesly">Pam Beesly</md-option>
<md-option value="angela_martin">Angela Martin</md-option>
<md-option value="kelly_kapoor">Kelly Kapoor</md-option>
<md-option value="ryan_howard">Ryan Howard</md-option>
<md-option value="kevin_malone">Kevin Malone</md-option>
<md-option value="creed_bratton">Creed Bratton</md-option>
<md-option value="oscar_nunez">Oscar Nunez</md-option>
<md-option value="toby_flenderson">Toby Flenderson</md-option>
<md-option value="stanley_hudson">Stanley Hudson</md-option>
<md-option value="meredith_palmer">Meredith Palmer</md-option>
<md-option value="phyllis_lapin_vance">Phyllis Lapin-Vance</md-option>
</md-select>
</md-input-container>
<div>Selected users: {{ users }}</div>
export default {
data: () => ({
food: '',
users: [],
options: [
{ id: 1, name: 'a' },
{ id: 2, name: 'b' },
{ id: 3, name: 'c' },
{ id: 4, name: 'd' },
{ id: 5, name: 'e' }
],
items: []
})
};