首页 > 代码库 > 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()方法,重排选项