JavaScript 表单脚本——“选择框脚本”的注意要点

摘要：为了便于访问，对象添加了下列属性当前项在集合中的索引当前选项的标签，等价于中的标签布尔值，表示当前选项是否被选中。

选择框通过select和option元素创建的。除了共有的属性和方法外，下面的是特有的属性和方法：

add(newOption,relativeOption): 向控件中插入新元素，其位置相关项relativeOption之前

multiple: 布尔值，表示是否允许多项选择，等价于HTML的multiple特性

options: 控件中所有元素的HTMLCollection

remove(index): 移除给定位置的选项

selectedIndex: 基于0的选中项的索引，如果没有选中项的索引，则值为“-1”

size: 选择框中的可见行数，等价于HTML的size特性

如（旧方法，新方法在后面）：

var selection = document.getElementById("cars");
var addOption = document.getElementById("addOption");
selection.selectedIndex = -1; //已选择的项目-1为不选；0为第一个
//添加新选项
addOption.addEventListener("click", function() {
    var newOption = document.createElement("option");
    newOption.value = "swift";
    newOption.class = "swift";
    newOption.appendChild(document.createTextNode("swift"));
    selection.add(newOption, selection.options[selection.options.length]); //add()方法添加 .options表示控件中所有的选项
    addOption.disabled = true;
});
//设置为多项选择
var multiple = document.getElementById("multiple");
multiple.addEventListener("click", function() {
    selection.multiple = true; //multiple表示是否为多选
    selection.size = 2; //size表示可见的行数
});
//删除选项
var deleteOption = document.getElementById("delete");
deleteOption.addEventListener("click", function() {
    selection.remove(0); //remove()方法接收index
    if (selection.options.length < 1) {
        var newOption = document.createElement("option");
        newOption.value = "none";
        newOption.class = "none";
        newOption.appendChild(document.createTextNode("none"));
        selection.add(newOption, selection.options[selection.options.length]);
        selection.disabled = true;
    }
});
//获得选项的值
var output = document.getElementById("output");
selection.addEventListener("change", function () {
    output.firstChild.nodeValue = "Cars: " + selection.value;
});

需要注意，选择框type属性不是“select-one”就是“select-multiple”，这取决于HTML代码中有无multiple特性。

另外，value属性规则如下：

没有选中：value为空字符串；

选择一个，value特性在HTML中指定：value为指定的值；

选择一个，value特性在HTML中未指定：value为该选项的文本；

选择多个，依据前两条规则取得第一个选中项的值；

在DOM中，每个元素都有一个HTMLOptionElement对象表示。为了便于访问，HTMLOptionElement对象添加了下列属性：

index：当前项在option集合中的索引

label：当前选项的标签，等价于HTML中的label标签

selected：布尔值，表示当前选项是否被选中。将这个属性设置为true可以选中当前选项

text：选项的文本

value：选项的值，等价于HTML的value特性。

如：

var text = selection.options[0].text; //获取选项的文本
var text = selection.options[0].value; //获取选项的值

对于只能选择一项的选项，访问选中项的方式是使用选择框的selectedIndex属性。对于多选项，selectedIndex只返回第一项的索引值。

var selectedOption = selection.options[selection.selectedIndex]

如：

var output = document.getElementById("output");
selection.addEventListener("change", function () {
    output.firstChild.nodeValue = "Value: " + selection.options[selection.selectedIndex].value + "; Index: " + selection.selectedIndex + "; Text: " + selection.options[selection.selectedIndex].text;
});

或者冻结，只能选择某个选项

selection.addEventListener("change", function () {
    output.firstChild.nodeValue = selection.options[0].selected = true;
});

多选的情况下可以设置多个选项的selected属性为true：

selection.multiple = true;
selection.options[0].selected = true;
selection.options[2].selected = true;

可以遍历所有的选中项：

function getSelectedOptions(selectbox) {
    var result = [];
    var option = null;
    for (var i = 0; i < selectbox.options.length; i++) {
        if (selectbox.options[i].selected) {
            result.push(selectbox.options[i]);
        }
    }
    return result;
}
var list = getSelectedOptions(selection);
list.forEach( function(element, index) {
    console.log(element.value); //log所有被选中的选项
});

第一种方法DOM方法：

var selection = document.getElementById("cars");
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.value = "Option value";
selection.appendChild(newOption);

第二种方法Option构造函数（接收两个参数:text,value）：

var selection = document.getElementById("cars");
var newOption = new Option("Option text","Option value");
selection.appendChild(newOption); //这里可以用appendChild来添加，但在IE8及以前会出现问题

第三种方法使用add函数（接收两个参数：新选项，位于新选项最后的选项；如果要插入成为最后的选项，第二个参数应该设置为undefined）：

var selection = document.getElementById("cars");
var newOption = new Option("Option text","Option value");
selection.add(newOption,undefined); //第二个参数说明最新的option放在最后

如果要添加到别处，应当使用DOM方法和insertBefore()；

第一种方法DOM方法（利用removeChild方法）：

selection.removeChild(selection.options[0]);

第二种方法用选择框的remove方法：

selection.remove(0); //移除第一个

第三种为设置null：

selection.options[0] = null;

或者删除所有的选项（要注意：由于移除第一个选项后，所有后续选项都会自动向上移动一个位置，所以重复删除第一个选项就可以删除所有选项了。for循环内部需要把i替换成0）：

var selection = document.getElementById("cars");
for (var i = 0, len = selection.options.length; i < len; i++) {
    selection.removeChild(selection.options[0]);
    // selection.remove(0);
    // selection.options[0] = null;
};

也有网友说用innerHTML更方便;

移动选项用appendChild()方法：

var selection = document.getElementById("cars");
var selection2 = document.getElementById("cars2");
selection2.appendChild(selection.options[0]);

比如说让某个选项从一个选择框中移动到另一个选择框中：

var selection = document.getElementById("cars");
var selection2 = document.getElementById("cars2");
var transfer = document.getElementById("transfer");
transfer.addEventListener("click", function() {
    var selectedOptions = [];
    for (var i = 0, len = selection.options.length; i < len; i++) {
        if (selection.options[i].selected) {
            selectedOptions.push(selection.options[i]);
        }
    };
    for (var i = 0; i < selectedOptions.length; i++) {
        selection2.appendChild(selectedOptions[i]);
    }
});

重排序则需要利用到insertBefore()方法；

如果要让某个选项向上移动一格则：

var selection = document.getElementById("cars");
selection.insertBefore(selection.options[1],selection.options[0]);

或者按按钮让某个选项向上移动：

var selection = document.getElementById("cars");
var moveOptions = document.getElementById("transfer");
moveOptions.addEventListener("click", function() {
    for (var i = 0, len = selection.options.length; i < len; i++) {
        //如果这个选项被选中了，并且这个选项不是第一个
        if ((selection.options[i].selected) && (selection.options[i] != selection.options[0]) ) {
            //则选择的选项插入到前面的选项的前面
            selection.insertBefore(selection.options[i], selection.options[i - 1]);
        }
    };
});