选择框的value属性
如果用户选择了其中第一项,则选择框的值就是'Sunnyvale,Ca',如果文本为'China'的选项被选中,则选择框的值就是一个空字符串,因为其value
特性是空的。如果选择了最后一项,那么由于<option>中没有指定value特性,则选择框的值就是'Australia'.
<option>
每个<option>元素都有一个HTMLOptionElement对象表示,为了便于访问数据,HTMLOptionElement对象添加了下列属性index:当前选项在options集合中的索引。label:当前选项的标签;等价于HTML中的label特性。selected:布尔值,表示当前选项是否被选中。text:选项的文本。value:选项的值var selectbox = document.forms[0].elements['location'];var text = selectbox.option[0].text; //选项的文本var value = selectbox.option[0].value; //选项的值
选择选项
1、只允许选择一项对选择框,访问选中项对最简单方式,就是使用选择对selectedIndex属性var selectedOption = selectbox.options[selectbox.selectedIndex];//取得选中项之后,可以像下面这样显示该选项对信息:var selectedIndex = selectbox.selectedIndex;var selectedOption = selectbox.options[selectedIndex];console.log('Select index: ' + selectedIndex + '\nSelected text: ' + selectedOption.text + '\nSelected value: ' + selectedOption.value);
2、对于可以选择多项的选择框,有一种选择选项的方式,就是取得对某一项对引用,然后对其selected属性设置为true.
selectbox.options[0].selected = true;
在允许多选对选择框中设置选项对selected属性,不会取消对其他选中项对选择,因而可以动态选中任意多个项。
要取得所有选中对项,可以循环遍历选项集合,然后测试每个选项对selected属性。function getSelectedOptions(selectbox){ var result = new Array(); var option = null; for(var i=0,len=selectbox.options.length; i
添加选项
1、使用dom方法
var newOption = document.createElement('option');newOption.appendChild(document.createTextNode('Option text'));newOption.setAttribute('value', 'Option value');selectbox.appendChild(newOption);
2、使用Option构造函数,这个构造函数是dom出现之前就有的,一直遗留到现在。Option构造函数接受两个参数
文本(text)和值(value);第二个参数可选
var newOption = new Option('Option text', 'Option value');selectbox.appendChild(newOption); //在ie8及之前版本中有问题
这种方式在除ie之外的浏览器都可以使用。
3、使用选择框的add()方法。dom规定这个方法接受两个参数:要添加的新选项和将位于新选项之后的选项。
var newOption = new Option('Option text', 'Option value');selectbox.add(newOption, undefined); //最佳方案
想在列表中的最后添加一个选项,应该将第二个参数设置为null。在ie对add()方法的实现中,第二个参数是可选的,而且如果指定,该参数必须是新选项之后选项的索引。
兼容dom的浏览器要求必须指定第二个参数,因此编写跨浏览器的代码,就不能只传入一个参数。如果不是最后一个,使用标准的dom技术和insertBefore()方法。
移动选项
1、使用dom的removeChild()方法selectbox.removeChild(selectbox.options[0]);
2、使用选项框的remove()方法。接受一个参数,索引
selectbox.remove(0);
3、设置选项为null, dom出现之前浏览器的遗留机制。
selectbox.options[0] = null;
4、要清除所有的项,迭代
function clearSelectbox(selectbox){ for(var i=0,len=selectbox.options.length; i
移动和重排选择
1、从一个选择框的选项移动到另一个选择框var selectbox1 = document.getElementById('selLocation1');var selectbox2 = document.getElementById('selLocation2');selectbox2.appendChild(selectbox1.options[0]);
移动选项和移除选项,都会重置每一个选项都index属性
2、重排选择框的顺序
var optionToMove = selectbox.options[1];selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);