当“选项”不是静态时，如何引用“选择”列表的选定值？

Question

I have a simple question. I have a select list like this:

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

I have two questions about it:

1) I am pretty sure that the element that should be selected right now is "two"... isn't it?

2) Since the option elements are being created dinamically inside a loop (there are no three different option variables for me to play with, but just one that gets renewed as the loop goes forward), how do I reference the selected one for future uses?

For example, imagine that later on I get user input, and according to that input I want that this list has as a selected item, "three".

Thank you for any help! Here is the fiddle if you want to use it...

Answer 1

只需在for循环中更改以下内容即可解决选择问题：

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

Answer 2

1) I am pretty sure that the element that should be selected right now is "two"... isn't it?

No, it's not: you check element.nodeValue, while in fact you should've been checking textLabel 's one - or just the content itself:

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

2) Since the option elements are being created dinamically inside a loop (there are no three different option variables for me to play with, but just one that gets renewed as the loop goes forward), how do I reference the selected one for future uses?

See, <select> elements has two useful properties: options (which contains all the options in it, and is updated dynamically) and selectedIndex . You can combine them to get the selected option:

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

But if what you want is to know the value of selected element, that's even easier - with container.value .

For example, imagine that later on I get user input, and according to that input I want that this list has as a selected item, "three".

That's piece of cake if you know the position of the option that corresponds to this: just use selectedIndex property again:

container.selectedIndex = 3;

Answer 3

Try to use console.log (on chrome or firefox with firebug) to debug your script :

Try this :

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

in order to refer to your selected element you should give your select element an id and access to it like below:

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