JavaScript 表单脚本——“选择框脚本”的注意要点

  • A+
所属分类:JavaScript

选择框通过select和option元素创建的。除了共有的属性和方法外,下面的是特有的属性和方法:

  • add(newOption,relativeOption): 向控件中插入新<option>元素,其位置相关项relativeOption之前
  • 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特性在HTML中未指定:value为该选项的文本;
  • 选择多个,依据前两条规则取得第一个选中项的值;

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

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

如:

选择的项

selectedIndex属性

对于只能选择一项的选项,访问选中项的方式是使用选择框的selectedIndex属性。对于多选项,selectedIndex只返回第一项的索引值。

如:

或者冻结,只能选择某个选项

selected属性

多选的情况下可以设置多个选项的selected属性为true:

可以遍历所有的选中项:

添加选项

DOM方法

第一种方法DOM方法:

Option构造函数方法(IE中有bug)

第二种方法Option构造函数(接收两个参数:text,value):

第三种方法使用add函数(接收两个参数:新选项,位于新选项最后的选项;如果要插入成为最后的选项,第二个参数应该设置为undefined):

如果要添加到别处,应当使用DOM方法和insertBefore();

移除选项

第一种方法DOM方法(利用removeChild方法):

第二种方法用选择框的remove方法:

第三种为设置null:

或者删除所有的选项(要注意:由于移除第一个选项后,所有后续选项都会自动向上移动一个位置,所以重复删除第一个选项就可以删除所有选项了。for循环内部需要把i替换成0):

也有网友说用innerHTML更方便;

移动和重排选项

移动选项用appendChild()方法:

比如说让某个选项从一个选择框中移动到另一个选择框中:

重排序则需要利用到insertBefore()方法;

如果要让某个选项向上移动一格则:

或者按按钮让某个选项向上移动:

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: