《JavaScript高级程序设计》读书笔记14.3选择框脚本

• 选择框是通过 <select>和 <option>元素创建的。
• HTMLSelectElement类型另外还提供了下列属性和方法：

1. add(newOption,relOption)：向控件中插入新<option>元素，其位置在相关项（relOption）
   之前。
2. multiple：布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。
3. options：控件中所有<option>元素的HTMLCollection。
4. remove(index)：移除给定位置的选项。
5. selectedIndex：基于0的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。
6. size：选择框中可见的行数；等价于HTML中的 size 特性。

• 选择框的value属性由当前选中项决定，相应规则如下：
  • 如果没有选中的项，则选择框的value属性保存空字符串。
  • 如果有一个选中项，而且该项的value特性已经在 HTML 中指定，则选择框的 value 属性等于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。
  • 如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该项的文本。
  • 如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。

• 选择框的type属性不是”select-one”，就是”select-multiple”.

• 在 DOM 中，每个<option>元素都有一个 HTMLOptionElement对象表示，HTMLOptionElement 对象添加了下列属性：

  • index：当前选项在 options集合中的索引。
  • label：当前选项的标签；等价于 HTML 中的 label 特性。
  • selected：布尔值，表示当前选项是否被选中。将这个属性设置为 true可以选中当前选项。
  • text：选项的文本。
  • value：选项的值（等价于 HTML 中的 value 特性）。

对选项数据的访问，如下代码：

var selectbox = document.forms[0]. elements["location"];
//推荐
var text = selectbox.options[0].text; //选项的文本
var value = selectbox.options[0].value; //选项的值