當“選項”不是靜態時，如何引用“選擇”列表的選定值？

Question

我有一個簡單的問題。 我有一個這樣的選擇列表：

var myarray = ["one", "two", "three"];
var container = document.createElement("select");  
for (var i = 0; i < myarray.length; i++) {
    var element = document.createElement("option");
    var textlabel = document.createTextNode(myarray[i]);

    if (element.nodeValue == "two") { 
        element.selected = true;
    }

    element.appendChild(textlabel); 
    container.appendChild(element);
}
document.body.appendChild(container);

我有兩個問題：

1）我很確定現在應該選擇的元素是“兩個”......不是嗎？

2）由於option元素是在循環內部創建的（我沒有三個不同的選項變量供我使用，但只有一個隨着循環前進而更新），我如何引用所選的一個以供將來使用？

例如，想象一下，稍后我會得到用戶輸入，並根據該輸入我希望此列表具有選定項目“三”。

感謝您的任何幫助！ 如果你想使用它，這是小提琴 ......

Answer 1

只需在for循環中更改以下內容即可解決選擇問題：

if (myarray[i] == "two")

Answer 2

1）我很確定現在應該選擇的元素是“兩個”......不是嗎？

不，它不是：你檢查了element.nodeValue，而實際上你應該檢查textLabel - 或者只是內容本身：

if (myarray[i] === 'two') {
  element.selected = true;
}

2）由於選項元素是在循環內部創建的（我沒有三個不同的選項變量供我使用，但只有一個隨着循環前進而更新），我如何引用所選的一個以供將來使用？

請參閱<select>元素有兩個有用的屬性： options （包含其中的所有選項，並動態更新）和selectedIndex 。 您可以將它們組合在一起以獲得所選的選項：

container.addEventListener('change', function() {
   console.log(this.options[this.selectedIndex]);
}, false);

但是如果你想要知道所選元素的價值 ，那就更容易了 - 使用container.value 。

例如，想象一下，稍后我會得到用戶輸入，並根據該輸入我希望此列表具有選定項目“三”。

如果您知道與此對應的選項的位置，這是一塊蛋糕：再次使用selectedIndex屬性：

container.selectedIndex = 3;

Answer 3

嘗試使用console.log （在chrome或firefox上使用firebug）來調試腳本：

試試這個 ：

var myarray = ["one", "two", "three"];
var container = document.createElement("select");
container.id = "mySelect" ;  
    for (var i = 0; i < myarray.length; i++) {
        var element = document.createElement("option");
        var textlabel = document.createTextNode(myarray[i]);

        element.appendChild(textlabel);   

        if (element.value == "two") { 
            element.selected = true;

        }

        container.appendChild(element);
    }
        document.body.appendChild(container);

為了引用您選擇的元素，您應該為您的select元素提供一個id並訪問它，如下所示：

el = document.getElementById('mySelect');
el.selectedIndex ; // give you the selected index
el.options[el.selectedIndex]; // give you the value