更多"Try it Yourself"下面的例子。
定義和用法
選項集合返回所有的集合<option>在下拉列表中的元素。
Note:因為它們出現在源代碼的集合中的元素進行排序。
瀏覽器支持
| 採集 | |||||
|---|---|---|---|---|---|
| options | 是 | 是 | 是 | 是 | 是 |
句法
selectObject .options屬性
| 屬性 | 描述 |
|---|---|
| length | 返回的數<option>集合中的元素。 注：該屬性為只讀 |
| selectedIndex | 設置或返回所選擇的索引<option>元素集合中(starts at 0) |
方法
| 方法 | 描述 |
|---|---|
| [ index ] | 返回<option>從與指定的索引的集合元素(starts at 0) 。 注：如果索引數量超出範圍，則返回null |
| [ add( option [, index ]) ] | 增加了一個<option>元件中的指定索引的集合。 如果未指定索引，它插入在集合的末尾選項 |
| item( index ) | 返回<option>從與指定的索引的集合元素(starts at 0) 。 注：如果索引數量超出範圍，則返回null |
| namedItem( id ) | 返回<option>從與指定ID的集合元素。 注：如果ID不存在，則返回null |
| remove( index ) | 移除<option>與來自集合中的指定索引元件 |
技術細節
| DOM版本： | 酷睿2級文檔對象 |
|---|---|
| 返回值： | 一個HTMLOptionsCollection對象，代表所有<option>中的元素<select>元素。 當它們出現在源代碼的集合中的元素進行排序 |
更多示例
例
[ 索引 ]
獲得第一個選項的文本(index 0)的下拉列表：
var x = document.getElementById("mySelect").options[0].text;x的結果將是：
Apple 試一試» 例
item( index )
獲得第一個選項的文本(index 0)的下拉列表：
var x = document.getElementById("mySelect").options.item(0).text;x的結果將是：
Apple 試一試» 例
namedItem( id )
獲取在下拉列表ID =“橙色”選項的文字：
var x = document.getElementById("mySelect").options.namedItem("orange").text;x的結果將是：
Orange 試一試» 例
添加"Kiwi"索引位置選擇"1"在下拉列表：
var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1); 試一試» 例
通過在下拉列表中的所有選項循環，輸出的每個選項的文本：
var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0;
i < x.length; i++) {
txt = txt + x.options[i].text + "<br>";
}TXT的結果將是：
Apple
Orange
Pineapple
Banana 試一試» 例
選擇在下拉列表和輸出所選擇的選項中使用id =“演示”的元素中的文本的選項：
var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;其結果可能是：
Banana 試一試» 例
更改依賴於另一個下拉列表中選擇的選項下拉列表中的選項：
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW']
= ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList =
document.getElementById("car");
var modelList = document.getElementById("carmodel");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length)
{
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
var i;
for (i = 0; i < cars.length; i++)
{
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
} 試一試» <選擇對象