All major browsers support the
select element creates single-select or multiple-select menus.
Tip: The select element is a form control that can be used to accept user input in a form.
New: New attributes in HTML5.
| Property | Value | Description |
|---|---|---|
| autofocus(5) | autofocus | Specifies that the text area automatically gains focus after the page loads. |
| disabled | disabled | Provision to disable this dropdown list. |
| form(5) | form_id | Specifies one or more forms to which the text area belongs. |
| multiple | multiple | Multiple options can be selected. |
| name | name | Specifies the name of the drop-down list. |
| required(5) | required | Specifies that the text area is required. |
| size | number | Specifies the number of visible options in the drop-down list. |
<html> <body> <form> <<span style="color: #0000ff;">select</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">cars</span><span style="color: #800000;">"</span>> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">volvo</span><span style="color: #800000;">"</span>>Volvo</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">saab</span><span style="color: #800000;">"</span>>Saab</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">fiat</span><span style="color: #800000;">"</span>>Fiat</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">audi</span><span style="color: #800000;">"</span>>Audi</option> </<span style="color: #0000ff;">select</span>> </form> </body> </html>
<html> <body> <form> <<span style="color: #0000ff;">select</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">cars</span><span style="color: #800000;">"</span>> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">volvo</span><span style="color: #800000;">"</span>>Volvo</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">saab</span><span style="color: #800000;">"</span>>Saab</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">fiat</span><span style="color: #800000;">"</span> selected=<span style="color: #800000;">"</span><span style="color: #800000;">selected</span><span style="color: #800000;">"</span>>Fiat</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">audi</span><span style="color: #800000;">"</span>>Audi</option> </<span style="color: #0000ff;">select</span>> </form> </body> </html>
Select object represents a drop-down list in an HTML form.
In an HTML form, every time the
You can access a Select object by looping through the form's elements[] array, or using document.getElementById().
| Collection | Description |
|---|---|
| options[] | Returns an array containing all options in the dropdown list. |
| Property | Description |
|---|---|
| disabled | Sets or returns whether the dropdown should be disabled. |
| form | Returns a reference to the form containing the dropdown list. |
| id | Set or return the id of the drop-down list. |
| length | Returns the number of options in the drop-down list. |
| multiple | Set or return whether to select multiple items. |
| name | Set or return the name of the drop-down list. |
| selectedIndex | Set or return the index number of the selected item in the drop-down list. |
| size | Set or return the number of visible rows in the dropdown list. |
| tabIndex | Set or return the tab key control order of the drop-down list. |
| type | Returns the form type of the drop-down list. |
| Property | Description |
|---|---|
| className | Sets or returns the class attribute of an element. |
| dir | Set or return the direction of text. |
| lang | Set or return the language code of the element. |
| title | Sets or returns the element's title attribute. |
| Method | Description |
|---|---|
| add() | Add an option to the dropdown list. |
| blur() | Remove focus from dropdown list. |
| focus() | Set focus on dropdown list. |
| remove() | Remove an option from the dropdown list. |
| Event handle | Description |
|---|---|
| onchange | Event handler called when the selection is changed. |
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
