Quickstart: adding Select controls (HTML)

  • Article

[ 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.