摘要：為了便于訪問，對(duì)象添加了下列屬性當(dāng)前項(xiàng)在集合中的索引當(dāng)前選項(xiàng)的標(biāo)簽，等價(jià)于中的標(biāo)簽布爾值，表示當(dāng)前選項(xiàng)是否被選中。

選擇框通過select和option元素創(chuàng)建的。除了共有的屬性和方法外，下面的是特有的屬性和方法：

add(newOption,relativeOption): 向控件中插入新元素，其位置相關(guān)項(xiàng)relativeOption之前

multiple: 布爾值，表示是否允許多項(xiàng)選擇，等價(jià)于HTML的multiple特性

options: 控件中所有元素的HTMLCollection

remove(index): 移除給定位置的選項(xiàng)

selectedIndex: 基于0的選中項(xiàng)的索引，如果沒有選中項(xiàng)的索引，則值為“-1”

size: 選擇框中的可見行數(shù)，等價(jià)于HTML的size特性

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

var selection = document.getElementById("cars");
var addOption = document.getElementById("addOption");
selection.selectedIndex = -1; //已選擇的項(xiàng)目-1為不選；0為第一個(gè)
//添加新選項(xiàng)
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表示控件中所有的選項(xiàng)
    addOption.disabled = true;
});
//設(shè)置為多項(xiàng)選擇
var multiple = document.getElementById("multiple");
multiple.addEventListener("click", function() {
    selection.multiple = true; //multiple表示是否為多選
    selection.size = 2; //size表示可見的行數(shù)
});
//刪除選項(xiàng)
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;
    }
});
//獲得選項(xiàng)的值
var output = document.getElementById("output");
selection.addEventListener("change", function () {
    output.firstChild.nodeValue = "Cars: " + selection.value;
});

需要注意，選擇框type屬性不是“select-one”就是“select-multiple”，這取決于HTML代碼中有無multiple特性。

另外，value屬性規(guī)則如下：

沒有選中：value為空字符串；

選擇一個(gè)，value特性在HTML中指定：value為指定的值；

選擇一個(gè)，value特性在HTML中未指定：value為該選項(xiàng)的文本；

選擇多個(gè)，依據(jù)前兩條規(guī)則取得第一個(gè)選中項(xiàng)的值；

在DOM中，每個(gè)元素都有一個(gè)HTMLOptionElement對(duì)象表示。為了便于訪問，HTMLOptionElement對(duì)象添加了下列屬性：

index：當(dāng)前項(xiàng)在option集合中的索引

label：當(dāng)前選項(xiàng)的標(biāo)簽，等價(jià)于HTML中的label標(biāo)簽

selected：布爾值，表示當(dāng)前選項(xiàng)是否被選中。將這個(gè)屬性設(shè)置為true可以選中當(dāng)前選項(xiàng)

text：選項(xiàng)的文本

value：選項(xiàng)的值，等價(jià)于HTML的value特性。

如：

var text = selection.options[0].text; //獲取選項(xiàng)的文本
var text = selection.options[0].value; //獲取選項(xiàng)的值

對(duì)于只能選擇一項(xiàng)的選項(xiàng)，訪問選中項(xiàng)的方式是使用選擇框的selectedIndex屬性。對(duì)于多選項(xiàng)，selectedIndex只返回第一項(xiàng)的索引值。

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;
});

或者凍結(jié)，只能選擇某個(gè)選項(xiàng)

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

多選的情況下可以設(shè)置多個(gè)選項(xiàng)的selected屬性為true：

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

可以遍歷所有的選中項(xiàng)：

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所有被選中的選項(xiàng)
});

第一種方法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構(gòu)造函數(shù)（接收兩個(gè)參數(shù):text,value）：

var selection = document.getElementById("cars");
var newOption = new Option("Option text","Option value");
selection.appendChild(newOption); //這里可以用appendChild來添加，但在IE8及以前會(huì)出現(xiàn)問題

第三種方法使用add函數(shù)（接收兩個(gè)參數(shù)：新選項(xiàng)，位于新選項(xiàng)最后的選項(xiàng)；如果要插入成為最后的選項(xiàng)，第二個(gè)參數(shù)應(yīng)該設(shè)置為undefined）：

var selection = document.getElementById("cars");
var newOption = new Option("Option text","Option value");
selection.add(newOption,undefined); //第二個(gè)參數(shù)說明最新的option放在最后

如果要添加到別處，應(yīng)當(dāng)使用DOM方法和insertBefore()；

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

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

第二種方法用選擇框的remove方法：

selection.remove(0); //移除第一個(gè)

第三種為設(shè)置null：

selection.options[0] = null;

或者刪除所有的選項(xiàng)（要注意：由于移除第一個(gè)選項(xiàng)后，所有后續(xù)選項(xiàng)都會(huì)自動(dòng)向上移動(dòng)一個(gè)位置，所以重復(fù)刪除第一個(gè)選項(xiàng)就可以刪除所有選項(xiàng)了。for循環(huán)內(nèi)部需要把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;
};

也有網(wǎng)友說用innerHTML更方便;

移動(dòng)選項(xiàng)用appendChild()方法：

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

比如說讓某個(gè)選項(xiàng)從一個(gè)選擇框中移動(dòng)到另一個(gè)選擇框中：

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()方法；

如果要讓某個(gè)選項(xiàng)向上移動(dòng)一格則：

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

或者按按鈕讓某個(gè)選項(xiàng)向上移動(dòng)：

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++) {
        //如果這個(gè)選項(xiàng)被選中了，并且這個(gè)選項(xiàng)不是第一個(gè)
        if ((selection.options[i].selected) && (selection.options[i] != selection.options[0]) ) {
            //則選擇的選項(xiàng)插入到前面的選項(xiàng)的前面
            selection.insertBefore(selection.options[i], selection.options[i - 1]);
        }
    };
});