说说 JavaScript 表单的选择框脚本

选择框通过 <select> 和 <option> 元素创建的。HTMLSelectElement 除了具有所有表单字段所共有的属性和方法外，还有这些：

属性或方法 说明 add(newOption, relOption) 在 relOption 之前插入新的 <option> 元素。 multiple 布尔值，是否允许多选，等价于 HTML 的 multiple 属性。 options 所有 <option> 元素的 HTMLCollection。 remove(index) 移除给定位置的选项。 selectedIndex 选中项的索引；基于 0；如果没有选中项，则为 -1。如果支持多选，这个值只表示选中项中的第一项的索引。 size 选择框中可见的行数；等价于 HTML 的 size 属性。

---

由 HTML 的 multiple 属性来决定选择框 type 属性值（select-one/select-multiple）,选择框的 value 属性由选中项决定，规则如下：

条件 value 值 没有选中的项 空字符串 有一个选中项，且 value 属性在 HTML 中已指定 选中项的 value 属性 有一个选中项，但 value 属性在 HTML 中没有指定 选中项的文本。 有多个选中项 根据前两条规则取得第一个选中项的值。

---

<option> 元素由 HTMLOptionElement 对象来表示，它有这些属性：

属性 说明 index 当前选项在 options 集合中的索引 label 当前选项的标签；等价于 HTML 的 label 属性。 selected 当前选项是否被选中；设为 true，就能选中该项。 text 选项的文本。 value 选项的值，等价于 HTML 的 value 属性。

---

使用这些属性可以很方便地对选项数据进行访问。虽然可以使用常规的 DOM 功能来访问它们，但效率较低，推荐使用选项属性直接访问：

var selectbox = document.forms[0].elements["location"];// DOM 方法（不推荐）var text = selectbox.options[0].firstChild.nodeValue;var value = selectbox.options[0].getAttribute("value");// 选项属性（推荐）var text = selectbox.options[0].text;var value = selectbox.options[0].value;

只要选中了选项，就会触发选择框的 change 事件！而其他表单字段的 change 事件，只有在值被修改而且焦点离开当前字段时才会触发。

---

注意： 未指定 value 属性的情况下，IE8 会返回空字符串，而 IE9+ 以及其他浏览器会返回与 text 属性相同的值。

---

1 选择选项

只允许单选的选择框，可以使用 selectedIndex 属性来访问选中项：

<select name="location" id="selLocation">    <option value="fuzhou">福州</option>    <option value="India">印度</option></select><script type="text/javascript">    var sel = document.getElementById("selLocation");    EventUtil.addHandler(sel, "change", function (event) {        var selectedIndex = sel.selectedIndex;        var selectedOption = sel.options[selectedIndex];        console.log("Selected index: " + selectedIndex + "\nSelected text: " + selectedOption.text + "\nSelected value: " + selectedOption.value);    });</script>

对于允许多选的选择框，设置 selectedIndex 会取消之前的所有选项，重新指定当前项为选中项。读取 selectedIndex，只会返回选中项的第一项的索引值。

另一种选择选项的方式是，先取得某一项的引用，然后将 selected 设置为 true ：

selectbox.options[0].selected = true;

对于允许多选的选择框来说，设置 selected 属性，就可以动态选中多个项。但在只允许单选的选择框中，设置 selected 属性，会取消其他的选中项；而且将 selected 设为 false，对单选的选择框没有影响。

通过 selected 属性，可以得知用户选择了哪一项：

<select name="location" id="selLocation" multiple="multiple">    <option value="fuzhou">福州</option>    <option value="India">印度</option></select><script type="text/javascript">    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");    EventUtil.addHandler(selectbox, "change", function (event) {        var selectedOptions = getSelectedOptions(selectbox);        var message = "";        for (var i = 0, len = selectedOptions.length; i < len; i++) {            message += "Selected index: " + selectedOptions[i].index + "\nSelected text: " +            selectedOptions[i].text + "\nSelected value: " + selectedOptions[i].value+"\n\n";        }        console.log(message);    });</script>

2 添加选项

JavaScript 可以动态创建选项，并添加到选择框中：

<script type="text/javascript">    var selectbox = document.getElementById("selLocation");    var newOption = document.createElement("option");    newOption.appendChild(document.createTextNode("Option text"));    newOption.setAttribute("value", "Option value");    selectbox.appendChild(newOption);</script>

注意：上述代码适用于 IE8 之后的版本以及其他浏览器！

也可以使用 add() 方法添加新选项，它接受两个参数：要添加的新选项和放在新选项之后的选项。因为 IE 的这个方法的第二个参数是可选的，而在兼容 DOM 的浏览器中第二个参数是必选的，所以我们这里传入 undefined：

//将新选项添加到列表最后var lastOption=new Option("last text","last value");selectbox.add(lastOption,undefined);//跨浏览器方案

如果要将新选项添加到其他位置，就必须使用标准的 DOM 技术和 insertBefore() 方法。

---

注意： Option 构造函数也支持一个参数（选项的文本）的情况！

---

3 移除选项

可以使用 DOM 的 removeChild() 来移除选项，它接受的参数是要移除的选项;

selectbox.removeChild(selectbox.options[0]);//移除第一项

也可以使用选择框的 remove() ，它接受是要移除的选项的索引：

selectbox.remove(0);//移除第一项

第 3 种方式是将相应的选项设置为 null，这是 DOM 之前旧方法咯：

selectbox.options[0] = null;

这样清除选择框选中的所有选项（迭代并逐个移除）：

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

这个函数每次只移除第一个选项。因为移除第一个选项之后，其他的选项就会自动补位，所以只要重复移除第一个选项就可以啦O(∩_∩)O~

4 移动和重排选项

DOM 的 appendChild() 方法可以把第一个选择框中的选项直接移动到第二个选择框中。因为它会先把这个元素从父节点中移除，然后再添加到指定位置：

<select name="location" id="selLocation" multiple="multiple">    <option value="fuzhou">福州</option>    <option value="India">印度</option></select><select name="location2" id="selLocation2" multiple="multiple">    <option value="Thailand">泰国</option></select><script type="text/javascript">    var selectbox = document.getElementById("selLocation");    var selectbox2 = document.getElementById("selLocation2");    selectbox2.appendChild(selectbox.options[0]);</script>

移动选项和移除选项有一点一样，那就是都会重置每一个选项的 index 属性。

appendChild() 只适用于把选项添加到选择框之后，所以我们使用 DOM 的 insertBefore() ，这个方法就可以把选择框中的某一项移动到特定位置，实现重排选项的功能：

<select name="location" id="selLocation" multiple="multiple">    <option value="fuzhou">福州</option>    <option value="India">印度</option></select><script type="text/javascript">    var selectbox = document.getElementById("selLocation");    var optionToMove = selectbox.options[1];    //第二项向前移动一位    selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index - 1]);    //第一项向后移动一位    selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index + 2]);</script>

---

注意： IE7 存在页面重绘的问题，可能会导致使用 DOM 方法的选项重排无法及时正确显示。

---