Select box options not visible in IE 8

Question

I am using Javascript to create a <select> box. It is working fine in Firefox and Chrome but in Internet Explorer the <option> s are not visible.

HTML

<select id="categroy_renew" name="categroy_renew" onchange="category_check()" style="width:310px; height:35px; padding:8px; margin-left:95px;">
    <option value="0">Select Your Category</option>
</select>

Javascript

var category_vals = document.getElementById("categroy_renew");
    for(var i=0;i<data.length;i++){
        category_vals.appendChild(new Option("PK-"+data[i].cat,data[i].cat));
    }
}

I tried category_vals.innerHTML - it not even displayed the default <option> "Select your category", although it is present in HTML.

Answer 1

You can use add() function of javascript

var category_vals = document.getElementById("categroy_renew");

for(var i=0;i<data.length;i++){
    var option = document.createElement("option");
    option.text = "PK-"+data[i].cat,data[i].cat;
    category_vals.add(option);
}