HTML DOM options 集合

定义和用法

option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。

注释:数组中的每个元素对应一个 <option> 标签 - 由 0 起始。

语法

  1. selectObject.options[]

说明

options[] 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容,这个集合有某种特殊的行为:允许通过 Select 对象来改变显示的选项:

  • 如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
  • 如果 options.length 属性的值比当前值小,出现在数组尾部的元素就会被丢弃。
  • 如果把 options[] 数组中的一个元素设置为 null,那么选项就会从 Select 对象中删除。
  • 可以通过构造函数 Option() 来创建一个新的 option 对象(需要设置 options.length 属性)。

实例

下面的例子返回下拉列表中所有选项的文本:

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function getOptions()
  5. {
  6. var x=document.getElementById("mySelect");
  7. var y="";
  8. for (i=0;i<x.length;i++)
  9. {
  10. y+=x.options[i].text;
  11. y+="<br />";
  12. }
  13. document.write(y);
  14. }
  15. </script>
  16. </head>
  17.  
  18. <body>
  19.  
  20. <form>
  21. 请选择您喜欢的水果:
  22. <select id="mySelect">
  23. <option>苹果</option>
  24. <option>桃子</option>
  25. <option>香蕉</option>
  26. <option>桔子</option>
  27. </select>
  28. <br /><br />
  29. <input type="button" onclick="getOptions()" value="输出所有选项">
  30. </form>
  31.  
  32. </body>
  33. </html>