<div class="form-item ">
<label for="select-3">Select with optgroups</label>
<select id="select-3" name="select-3" class="">
<optgroup label="Group 1">
<option value="option-0">Option 1-1</option>
<option value="option-1">Option 1-2</option>
<option value="option-2" selected>Option 1-3</option>
</optgroup>
<optgroup label="Group 2">
<option value="option-0">Option 2-1</option>
<option value="option-1">Option 2-2</option>
<option value="option-2">Option 2-3</option>
</optgroup>
</select>
</div>
{{#> @form-item}}
{{> @select--optgroup}}
{{/ @form-item}}
{
"label": "Select with optgroups",
"id": "select-3",
"options": [
{
"option": "Option 1"
},
{
"option": "Option 2"
},
{
"option": "Option 3",
"selected": true
},
{
"option": "Option 4"
},
{
"option": "Option 5"
},
{
"option": "Option 6"
}
],
"optgroups": [
{
"label": "Group 1",
"options": [
{
"option": "Option 1-1"
},
{
"option": "Option 1-2"
},
{
"option": "Option 1-3",
"selected": true
}
]
},
{
"label": "Group 2",
"options": [
{
"option": "Option 2-1"
},
{
"option": "Option 2-2"
},
{
"option": "Option 2-3"
}
]
}
]
}
form-item-select gives the <select> element and the accompanying <label> a container with the following properties:
<select> element within its container (useful for putting inside more complex layouts, like a grid)