Quickstart: adding Select controls (HTML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
This quickstart walks you through the steps to add a Select control to a Windows app using JavaScript.
Prerequisites
None
Instructions
1. Create a flyout mode Select control.
In HTML, the <select> element represents the Select control. To create a flyout mode Select control, add the <select> element without a size and multiple attribute. The following example creates a flyout Select control that contains two groups, each with three items to select from. Users can't select the group names.
<select>
<optgroup label="Fruits">
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
</optgroup>
<optgroup label="Vegetables">
<option>Broccoli</option>
<option>Carrots</option>
<option>Eggplant</option>
</optgroup>
</select>
2. Or create an inline mode Select control.
To put the select control into inline mode, set the size attribute, or set the multiple attribute to enable multi-selection for inline mode. You should never use the multiple attribute without having first set the size attribute. The following example creates a multi-selectable select control in inline mode, with six items to select from.
<select size="8" multiple>
<optgroup label="Fruits">
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
</optgroup>
<optgroup label="Vegetables">
<option>Broccoli</option>
<option>Carrots</option>
<option>Eggplant</option>
</optgroup>
</select>
Summary
In this quickstart, you learned how to add select controls.