JavaScript高级程序设计56.pdf

选择选项

对于只允许选择一项的选择框，访问选中项最简单的方式是selectedIndex属性

var selectedOption=selectbox.options["selectbox.selectedIndex"];

对于可以多选的选择框selectedIndex属性会导致取消之前的所有选项，并选择指定的那一项，读取selectedIndex属性只会返回选中项中第一项的索引值

另一种选择选项的方式是取得某一项的引用，将其selected属性设置为true（将它设置为false对单选框没有影响）

selectbox.options[0].selected=true;

要取得所有选中的项，可以循环遍历选项集合，然后测试每个选项的selected属性

//省略的代码

for(var i=0,len=selectbox.options.length;i<len;i++){

　　　　option=selectbox.options[i];

　　　　if(option.selected){

　　　　　　result.push(option);

　　　　}

　　}

添加选项

1.DOM方法

var newOption=document.createElement("option");

newOption.appendChild(document.createTextNode("Option text"));

newOption.setAttribute("value","Option value");

selectbox.appendChild(newOption);

2.使用Option构造函数创建新选项，接收2个参数：文本（text）和值（value），第二个参数可选

var newOption=new Option("Option text","Option value");

selectbox.appendChild(newOption);　　//在IE8及之前版本中有问题

3.使用选择框的add()方法，接收2个参数：要添加的新选项，和将位于新选项之后的选项（第二个选项设置为null，可以添加为最后一个选项），IE对add()方法的实现中，第二个参数是可选的，如果指定，该选项必须是新选项之后选项的索引。为了跨浏览器，第二个参数设置为undefined，都添加为选项的最后一项

var newOption=new Option("Option text","Option value");

selectbox.add(newOption,undefined);

移除选项

selectbox.removeChlid(selectbox.options[0]);

selectbox.remove(0);

selectbox.options[0]=null;

移动和重排选项

使用appendChlid()方法和insertBefore()方法，重排选项