Widely availableA good default when the option list is finite and users should choose from known values rather than type freely.

Overview

The <select> element provides a native control for choosing one or more options from a list. It offers built-in keyboard support and familiar browser behavior.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
1
≤4
18
≤3.2
HTML attribute

The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.

1
12
1
7
18
label
1
12
1
≤4
18
≤3.2

The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.

1
12
1
≤4
18
≤3.2
label
1
12
1
≤4
18
≤3.2
selected
1
12
1
≤4
18
≤3.2
value
1
12
1
≤4
18
≤3.2

The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.

1
12
1
3
18
2

The form HTML attribute associates a form-associated element with a form element within the same document. This attribute applies to the button, fieldset, input, object, output, select, and textarea elements.

1
12
1
3
18
2
hr_in_select

`<hr>` in `<select>`

119
119
122
17
17.4

The Boolean multiple attribute, if set, means the form control accepts one or more values. The attribute is valid for the input/email and input/file input types and the select. The manner by which the user opts for multiple values depends on the form control.

1
12
1
3
18
2
name
1
12
1
3
18
2

The Boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

10
12
4
5.1
18
5

The size attribute defines the width of the input and the height of the select element. For an input element, it defines the number of characters that the user agent allows the user to see when editing the value. For a select element, it defines the number of options that should be shown to the user. This must be a valid non-negative integer greater than…

1
12
1
3
142
DOM API

The HTMLOptGroupElement interface provides special properties and methods (beyond the regular HTMLElement object interface they also have available to them by inheritance) for manipulating the layout and presentation of optgroup elements.

1
12
1
3
18
1

The disabled property of the HTMLOptGroupElement interface is a boolean value that reflects the optgroup element's disabled attribute, which indicates whether the control is disabled.

1
12
1
7
18
1

The label property of the HTMLOptGroupElement interface is a string value that reflects the optgroup element's label attribute, which provides a textual label to the group of options.

1
12
1
3
18
1

The HTMLOptionElement interface represents option elements and inherits all properties and methods of the HTMLElement interface.

1
12
1
1.2
18
1

The defaultSelected property of the HTMLOptionElement interface specifies the default selected state of the element. This property reflects the option element's selected attribute. The presence of the selected attribute sets the defaultSelected property to true.

1
12
1
3
18
1

The disabled property of the HTMLOptionElement is a boolean value that indicates whether the option element is unavailable to be selected. The property reflects the value of the disabled HTML attribute.

1
12
1
3
18
1

The form read-only property of the HTMLOptionElement interface returns an HTMLFormElement object that owns the HTMLSelectElement associated with this option, or null if this option is not associated with a select owned by a form.

1
12
1
3
18
1

The read-only index property of the HTMLOptionElement interface specifies the 0-based index of the element; that is, the position of the option within the list of options it belongs to, in tree-order, as an integer. If the is not part of an option-list, the value is 0.

1
12
1
3
18
1

The label property of the HTMLOptionElement represents the text displayed for an option in a select element or as part of a list of suggestions in a datalist element. It reflects the option element's label attribute.

1
12
7
3
18
1

The Option() constructor creates a new HTMLOptionElement.

1
12
1
1.2
18
1

The selected property of the HTMLOptionElement interface specifies the current selectedness of the element; that is, whether the option is selected or not.

1
12
1
3
18
1

The text property of the HTMLOptionElement represents the text inside the option element. This property represents the same information as Node.textContent.

1
12
1
3
18
1

The value property of the HTMLOptionElement interface represents the value of the option element as a string, or the empty string if no value is set. It reflects the element's value attribute, if present. Otherwise, it returns or sets the contents of the element, similar to the Node.textContent property.

1
12
1
3
18
1

The HTMLSelectElement interface represents a select HTML Element. These elements also share all of the properties and methods of other HTML elements via the HTMLElement interface.

1
12
1
1
18
1

The HTMLSelectElement.add() method adds an element to the collection of option elements for this select element.

1
12
1
3
18
1
add (index before parameter)

Index as `before` parameter

35
12
8
9
35
9

The autocomplete property of the HTMLSelectElement interface indicates whether the value of the control can be automatically completed by the browser. It reflects the element's autocomplete attribute.

66
79
59
9.1
66
9.3

The HTMLSelectElement.disabled property is a boolean value that reflects the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. A disabled element is unusable and un-clickable.

1
12
1
3
18
1

The form read-only property of the HTMLSelectElement interface returns an HTMLFormElement object that owns this select, or null if this select is not owned by any form.

1
12
1
3
18
1

The HTMLSelectElement.item() method returns the Element corresponding to the HTMLOptionElement whose position in the options list corresponds to the index given in the parameter, or null if there are none.

1
12
1
3
18
1

The HTMLSelectElement.labels read-only property returns a NodeList of the label elements associated with the select element.

6
18
56
5.1
18
5

The length property of the HTMLSelectElement interface specifies the number of option elements in the select element. It represents the number of nodes in the HTMLSelectElement.options collection. On setting, it acts as (HTMLOptionsCollection.length).

1
12
1
3
18
1

The multiple property of the HTMLSelectElement interface specifies that the user may select more than one option from the list of options. It reflects the select element's multiple attribute.

1
12
1
3
18
1

The name property of the HTMLSelectElement interface indicates the name of the select element. It reflects the element's name attribute.

1
12
1
3
18
1

The HTMLSelectElement.namedItem() method returns the HTMLOptionElement corresponding to the HTMLOptionElement whose name or id match the specified name, or null if no option matches.

1
12
1
3
18
1

The HTMLSelectElement.options read-only property returns a HTMLOptionsCollection of the option elements contained by the select element.

1
12
1
3
18
1

The HTMLSelectElement.remove() method removes the element at the specified index from the options collection for this select element.

1
12
1
3
18
1

The required property of the HTMLSelectElement interface specifies that the user must select an option with a non-empty string value before submitting a form. It reflects the select element's required attribute.

10
12
4
5.1
18
5

The selectedIndex property of the HTMLSelectElement interface is the numeric index of the first selected option element in a select element, if any, or −1 if no is selected. Setting this property selects the option at that index and deselects all other options, while setting it to -1 deselects any currently selected options.

1
12
1
3
18
1

The read-only HTMLSelectElement property selectedOptions contains a list of the option elements contained within the select element that are currently selected. The list of selected options is an HTMLCollection object with one entry per currently selected option.

19
12
26
6
25
6

The size property of the HTMLSelectElement interface specifies the number of options, or rows, that should be visible at one time. It reflects the select element's size attribute. If omitted, the value is 0.

1
12
1
3
18
1

The HTMLSelectElement.type read-only property returns the form control's type.

1
12
1
3
18
1

The HTMLSelectElement.value property contains the value of the first selected option element associated with this select element.

1
12
1
3
18
1
Other

The HTML element is used to define an item contained in a select, an optgroup, or a datalist element. As such, can represent menu items in popups and other lists of items in an HTML document.

1
12
1
≤4
18
≤3.2

The HTML element represents a control that provides a menu of options.

1
12
1
1
18
1
1+Supported (version) Not supported Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Before Safari 7, the attribute can be set, but has no effect.
Notes 1 item(s)
Implementation note
  • The attribute can be set, but has no effect.
Notes 3 item(s)
Implementation note
  • Before 77, Firefox didn't display the value of the `label` attribute as option text if element's content was empty. See bug 40545.
  • Historically, Firefox has allowed keyboard and mouse events to bubble up from the `<option>` element to the parent `<select>` element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), they will not bubble up when Firefox is in multi-process mode and the `<select>` element is displayed as a drop-down list. The behavior is unchanged if the `<select>` is presented inline and it has either the `multiple` attribute defined or a `size` attribute set to more than `1`. Rather than watching `<option>` elements for events, you should watch for change events on `<select>`. See bug 1090602 for details.
Removed
  • When Mozilla introduced dedicated content threads to Firefox (through the Electrolysis, or e10s, project), support for styling `<option>` elements was removed temporarily. Starting in Firefox 54, you can apply foreground and background colors to `<option>` elements again, using the `color` and `background-color` CSS properties. See bug 910022 for more information. Note that this is still disabled in Linux due to lack of contrast (see bug 1338283 for progress on this).
Notes 2 item(s)
Implementation note
  • Exposes the `<hr>` visually in the page only when the menu is expanded (arrowing within the collapsed menu does not show them).
  • Does not expose the `<hr>` in the accessibility tree.
Notes 2 item(s)
Implementation note
  • Exposes the `<hr>` visually in the page only when the menu is expanded (arrowing within the collapsed menu does not show them).
  • Does not expose the `<hr>` in the accessibility tree.
Notes 1 item(s)
Implementation note
  • Does not expose the `<hr>` in the accessibility tree.
Notes 1 item(s)
Implementation note
  • Does not expose the `<hr>` in the accessibility tree.
Notes 1 item(s)
Implementation note
  • Does not expose the `<hr>` in the accessibility tree.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (7)
Implementation note
  • The property can be set, but has no effect (see bug 227042).
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The property can be set, but has no effect (see bug 227042).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (7)
Implementation note
  • Before Firefox 7 the `label` property incorrectly returned an empty string if not defined instead of returning the element's text content.
Notes 1 item(s)
Implementation note
  • You should watch for change events on `<select>` instead of watching `<option>` elements for events. See bug 1090602 and Multiprocess Firefox Web content compatibility for details.
Notes 1 item(s)
Implementation note
  • `namedItem` does not appear to take the `name` attribute into account (only the `id` attribute) on Internet Explorer and Edge. There is a bug report to Microsoft about this.
Notes 1 item(s)
Implementation note
  • `border-radius` on `<select>` elements is ignored unless `-webkit-appearance` is overridden to an appropriate value.
Notes 1 item(s)
Implementation note
  • Historically, Firefox has allowed keyboard and mouse events to bubble up from the `<option>` element to the parent `<select>` element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the `<select>` element is displayed as a drop-down list. The behavior is unchanged if the `<select>` is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching `<option>` elements for events, you should watch for change events on `<select>`. See bug 1090602 for details.
Notes 1 item(s)
Implementation note
  • `border-radius` on `<select>` elements is ignored unless `-webkit-appearance` is overridden to an appropriate value.
Notes 1 item(s)
Implementation note
  • `border-radius` on `<select>` elements is ignored unless `-webkit-appearance` is overridden to an appropriate value.
Notes 1 item(s)
Implementation note
  • `border-radius` on `<select>` elements is ignored unless `-webkit-appearance` is overridden to an appropriate value.

Syntax

HTML
<label for="color">Select a color:</label>
<select id="color" name="color">
  <option value="">-- Please select --</option>
  <optgroup label="暖色">
    <option value="red">Red</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="寒色">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </optgroup>
</select>

Live demo

basic dropdown

Select element in selectionoption. Dropdownlist provide.

PreviewFullscreen

groupization with optgroup

Optgroup element in selectionoption kacategory by to groupization.

PreviewFullscreen

Multipleselection

Multiple attribute in multiple. Selectionoption simultaneous to selectionpossible to.

PreviewFullscreen

Use cases

  • Finite option sets

    Use select for regions, departments, roles, or any controlled vocabulary with a stable list.

  • Settings and preferences

    Expose mutually exclusive choices in a familiar compact control.

Cautions

  • Very long option lists can become hard to scan; searchable or grouped alternatives may work better in those cases.
  • Do not use select when users need flexible free-form entry or complex filtering behavior.

Accessibility

  • Select controls still need a visible label and, when necessary, helper text that explains the expected choice.

Powered by web-features