Creates a drop-down list or list box element.
To add items to the select element, use the option tag.
The select tag allows simple or multiple selection, depending on the state of the multiple property.
- If multiple selection is allowed, the visual appearance of the select tag can only be a list box.
- If only one selected element is allowed, the select element may be a drop-down list or a list box. The default appearance is the drop-down list in that case.
The select element is one of the form controls.
The selected state of the control can be submitted to a server if the following conditions are met:
- A form element must contain the select element.
- The action property of the container form must be set to the URL of the server.
- The name property of the select element must be specified and non-empty. If multiple selection is allowed, use brackets  at the end of the value to reach all of the selected elements on the server side.
- If multiple selection is allowed:
- If only one selected element is allowed:
- If only one selected element is allowed in the select element, the selectedIndex property contains the index of the selected item in the options collection of the select tag. If you need the value of the selected option in a single-selection list, you can use the value property of the select element.
- If multiple selection is allowed, you can get the selected elements by iterating throw the options collection of the select tag and check the value of the selected property of every option tag.
- If there is no selected element, the value of the selectedIndex property is -1.
If you need to detect when the selection has changed in a select element, use the onchange event. Example 6 demonstrates it.
The base interface, through which you can add new functionalities to the select object, is the HTMLSelectElement interface.
If you want to see the HTML objects by categories, please visit this page.
|HTML page for this element: select|
Example HTML code 1:
This example illustrates the use of the select element for a single-selection drop-down list:
Example HTML code 2:
This example illustrates the use of the select element for a single-selection list box:
Example HTML code 3:
This example illustrates the use of the select element for a multiple-selection list:
Example HTML code 4:
This example checks the selected item in a single-selection list, before submitting the form:
Example HTML code 5:
This example checks the count of the selected items in a multiple-selection list, before submitting the form:
Example HTML code 6:
This example illustrates the use of the onchange event for a select element:
Example HTML code 7:
This example displays the text of the selected items in a multiple-selection list:
Example HTML code 8:
This example is similar to the previous one but it displays the value of the selected items in a multiple-selection list:
Example HTML code 9:
This example shows how to create a selection list dynamically:
Example HTML code 10:
This example is similar to the previous one, but it uses 2-character alphabetical country codes for option values. It is useful if you want to store the selected country in database.
Example HTML code 11:
The previous two examples create selection list from arrays. The following one creates a selection list from a string. It is useful if you use AJAX to fill the contents of a selection list. For further details about AJAX, see the page for the XMLHttpRequest object and the responseText property.
Example HTML code 12:
This example illustrates how you can change the items in a select element depending on the selected item in another select element:
User Contributed Comments