表单(三)：select

选择框的value属性

<select name='location' id='selLocation'>
    <option value='Sunnyvale,Ca'>Sunnyvale</option>
    <option value='Los Angeles,Ca'>Los Angeles</option>
    <option value='Mountain View,Ca'>Mountain View</option>
    <option value=''>China</option>
    <option>Australia</option>
</select>

如果用户选择了其中第一项，则选择框的值就是'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<len; i++){
        option = selectbox.options[i];
        if(option.selected){
            result.push(option);
        }
    }
    return result;
}

var selectbox = document.getElementById('selLocation');
var selectedOption = getSelectedOptions(selectbox);
var message = '';
for(var i=0,len=selectedOption.length; i<len; i++){
    message += 'Select index: ' + selectedOption[i].index + '\nSelected text: ' + selectedOption[i].text + '\nSelected value: ' + selectedOption[i].value
}

 

添加选项

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<len; i++){
        selectbox.remove(0);
    }
}

 

移动和重排选择
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]);