HTML DOM options 集合
定義和用法
option 集合可返回包含 <select> 元素中所有 <option> 的一個(gè)數(shù)組。
注釋:數(shù)組中的每個(gè)元素對(duì)應(yīng)一個(gè) <option> 標(biāo)簽 - 由 0 起始。
語法
selectObject.options[]
說明
options[] 集合并非一個(gè)普通的 HTMLcollection。為了和早期的瀏覽器向后兼容,這個(gè)集合有某種特殊的行為:允許通過 Select 對(duì)象來改變顯示的選項(xiàng):
- 如果把 options.length 屬性設(shè)置為 0,Select 對(duì)象中所有選項(xiàng)都會(huì)被清除。
- 如果 options.length 屬性的值比當(dāng)前值小,出現(xiàn)在數(shù)組尾部的元素就會(huì)被丟棄。
- 如果把 options[] 數(shù)組中的一個(gè)元素設(shè)置為 null,那么選項(xiàng)就會(huì)從 Select 對(duì)象中刪除。
- 可以通過構(gòu)造函數(shù) Option() 來創(chuàng)建一個(gè)新的 option 對(duì)象(需要設(shè)置 options.length 屬性)。
實(shí)例
下面的例子返回下拉列表中所有選項(xiàng)的文本:
<html>
<head>
<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
var y="";
for (i=0;i<x.length;i++)
{
y+=x.options[i]
.text;
y+="<br />";
}
document.write(y);
}
</script>
</head>
<body>
<form>
請(qǐng)選擇您喜歡的水果:
<select id="mySelect">
<option>蘋果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br /><br />
<input type="button" onclick="getOptions()" value="輸出所有選項(xiàng)">
</form>
</body>
</html>