首页 » JavaScript » 选择框脚本

选择框脚本

选择框是通过<select>和<option>元素创建的。为了方便与这个控件交互,除了所有表单字段共有的属性和方法外,HTMLSelectElement类型还提供下列属性和方法。

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

选择框的type属性不是“select-one”,就是“select-multiple”,这取决于HTML代码中有没有multiple特性。选择框的value属性由当前选中项决定,相应的规则如下。

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

以下面的选择框为例:

<select name="location" id="selLocation">
    <option value="Sunnyvale, CA">Sunnyvale</option>
    <option value="Los Angeles, CA">Los Angeles</option>
    <option value="Mountain View, Ca">Mountain View</option>
    <option value="">China</option>
    <option>Australia</option>
</select>

如果用户选择了第一项,则选择框的值就是“Sunnyvale, CA”。如果文本为“China”的选项被选中,则选择的值就是一个空字符串,因为其value特性是空的。如果选择了最后一项,那么由于<option>中没有指定的value特性,则选择框的值就是“Australia”。

在DOM中,每个<option>元素都有一个HTMLOptionElement对象表示。为便于访问数据,HTMLOptionElement对象添加了下列属性:

  • index:当前选项在options集合中的索引。
  • label:当前选项的标签;等价于HTML中的label特性。
  • selected:布尔值,表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。
  • value:选项的值(等价于HTML中value特性)。

其中大部分属性的目的,都是为了方便对选项数据的访问。虽然也可以使用常规的DOM功能来访问这新信息,但效率比较低,如下面的例子所示:

var selectbox = document.forms[0].location;
//不推荐
var text = selectbox.options[0].firstChild.nodeValue;    //选项的文本
var value = selectbox.options[0].getAttribute("value");  //选项的值

以上代码使用标准DOM方法,取得了选择框中的第一项的文本和值。可以与下面使用选项属性的代码比较左一比较:

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

在操作选项时,我们建议最好是使用特定与选项的属性,因为所有浏览器都支持这些属性。在将表单控件作为DOM节点的情况下,实际的交互方式则会因为浏览器而已。我们不贵贱使用标准DOM技术修改<option>元素的文本或值。

选择框的change事件与其它表单字段的change事件触发的条件不一样。其他表单字段的change事件是在值被修改且焦点离开当前字段时触发,而选择框的change事件只要选中了选项就会触发。

不同浏览器下,选项的value属性返回什么值也存在差别。但是,在所有浏览器中,value属性始终等于value特性。在未指定value特性的情况下,IE会返回空字符串,而Safari、Firefox、Chrome和Opera则会返回与text特性相同的值。

此文章发表在 JavaScript 标签为 . 将固定链接加入收藏.