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

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

    for (var i = 0; i < data.length; i++) {
        var option = document.createElement("option");
        option.innerHTML = data[i].name;
        option.value = data[i].id;
        select.appendChild(option);
    }

It works fine on Firefox and Chrome, but not on Internet Explorer. When I check the html generated on IE I see

    <select id="selectBox"/>

Is there something I can do for it to work on IE?

EDIT After refreshing the html page on development tools(IE doesn't do this after the html change) I see that the options have been added, but there seems to be a problem assigning the value, I'm using

select.value = theValue;

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

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

    for (var i = 0; i < data.length; i++) {
        var option = document.createElement("option");
        option.innerHTML = data[i].name;
        option.value = data[i].id;
        select.appendChild(option);
    }

It works fine on Firefox and Chrome, but not on Internet Explorer. When I check the html generated on IE I see

    <select id="selectBox"/>

Is there something I can do for it to work on IE?

EDIT After refreshing the html page on development tools(IE doesn't do this after the html change) I see that the options have been added, but there seems to be a problem assigning the value, I'm using

select.value = theValue;

• javascript
• html
• internet-explorer

• how do you see the generated HTML on IE ? – mohkhan Commented Jul 9, 2013 at 23:04
• what version of IE are you using ? it works fine in IE9 and IE10. And i see nothing in your code that could prevent it from running in IE8. – c69 Commented Jul 9, 2013 at 23:18
• Works fine in IE8, just tested. – SomeShinyObject Commented Jul 9, 2013 at 23:33
• @mohkkhan I see the html in tools-development tools (or pressing F12) – ia.solano Commented Jul 10, 2013 at 13:17
• Your browser mode might be 10 but documents mode might be quirks... Put this meta tag in head section... <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> – Premshankar Tiwari Commented Jul 15, 2013 at 13:13

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

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.

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 pliant method HTMLOptionElement.Option() as described by @MaxArt