HTML DOM Select options collection
Select Objects Definition and Usage
option to return the collection contains all the <option> is an array <select> element.
Note: Each element in the array corresponds to a <option> tag - starting from 0.
grammar
selectObject.options
Attributes
| 属性 | 描述 |
|---|---|
| length | 返回集合的option元素数目 |
| selectedIndex | 设置或者返回select对象已选选项的索引值。(以 0 起始) |
method
| 方法 | 描述 |
|---|---|
| [index] | 以数字形式指定元素索引 (以 0 开始) |
| [add(element[,index])] | 在集合中添加option元素 |
| item(index) | 以数字索引返回集合中元素 |
| namedItem(name) | 以名称为索引返回集合元素 |
| remove(index) | 从集合中移除元素 |
Browser Support
All major browsers support options collection
Examples
Examples
Cycle of the output drop-down list of all the options:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Script>
function displayResult () {
var x = document.getElementById ( "mySelect");
var txt = "All options:";
var i;
for (i = 0; i <x.length; i ++) {
txt = txt + "\ n" + x.options [i] .text;
}
alert (txt);
}
</ Script>
</ Head>
<Body>
<Form>
Your favorite fruit:
<Select id = "mySelect">
<Option> Apple </ option>
<Option> Orange </ option>
<Option> Pineapple </ option>
<Option> Banana </ option>
</ Select>
</ Form>
<Button type = "button" onclick = "displayResult ()"> to display the text of all the options </ button>
</ Body>
</ Html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Script>
function displayResult () {
var x = document.getElementById ( "mySelect");
var txt = "All options:";
var i;
for (i = 0; i <x.length; i ++) {
txt = txt + "\ n" + x.options [i] .text;
}
alert (txt);
}
</ Script>
</ Head>
<Body>
<Form>
Your favorite fruit:
<Select id = "mySelect">
<Option> Apple </ option>
<Option> Orange </ option>
<Option> Pineapple </ option>
<Option> Banana </ option>
</ Select>
</ Form>
<Button type = "button" onclick = "displayResult ()"> to display the text of all the options </ button>
</ Body>
</ Html>
try it"
More examples
Also through a pull-down menu Options to modify options for the current drop-down menu.
Select Objects