Adding options to a select and selecting one on internet explorer

Question

I have a select, and I am filling the options using javascript. Something like

    var select = document.getElementById(\"selectBox\");

    for (var i = 0;          


        

Answer 1

The problem was where I was getting the selected value from. I was using ajax calls, and IE was (I think) caching the response. When I changed some value, the server had to give me the correct select option, but it was giving me wrong one since IE was always reading the same answer.

Answer 2

You can try this

Javascript

var select = document.getElementById("selectBox"),
    data = [{ name: "y", id: "b" }, { name: "z", id: "c" }],
    i;

for (i = 0; i < data.length; i += 1) {
    var option = document.createElement("option");
    
    option.appendChild(document.createTextNode(data[i].name));
    // or alternately
    //option.text = data[i].name;
    option.value = data[i].id;
    select.appendChild(option);
}

On jsfiddle

And of course there is the standards compliant method HTMLOptionElement.Option() as described by @MaxArt

Answer 3

Use add instead of appendChild:

select.add(option);

Also, using the Option constructor can save you some lines of code:

var option = new Option(data[i].name, data[i].id);