首页 > 代码库 > JavaScript高级程序设计56.pdf

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()方法,重排选项