Dynamic Drop down not working in IE11?

Question

var vehicleLineDD = document.getElementById("vehicleLineDD");
for (i = 0; i < arr.length; i++) {
    vehicleLineOp.text = arr[i].code + ': ' + arr[i].desc;
    vehicleLineOp.value = arr[i].code;
    vehicleLineDD.add(vehicleLineOp, null);
}

Hi Friends, here I am attach my code where I have struck now. Problem is vehicleLineDD is the dynamic drop down. Depends on another drop down I should load the values here. It is working fine in IE8, but in IE11 all the values are coming properly except vehicleLineDD.add(vehicleLineOp, null); is not adding the values, only last value alone added. Every time when change the first drop down here I can see only one option. Could anyone help me to come out from the the problem. Thanks in advance.

Answer 1

You need to create a new option element for the vehicleLineOp variable(using code similar to vehicleLineOp = document.createElement("option"); ), otherwise you're just constantly updating the same option element with different text and value attributes (which is why only the last applied text and value are showing up).

var vehicleLineOp;
var vehicleLineDD = document.getElementById("vehicleLineDD");
for (i = 0; i < arr.length; i++) {
    vehicleLineOp = document.createElement("option");
    vehicleLineOp.text = arr[i].code + ': ' + arr[i].desc;
    vehicleLineOp.value = arr[i].code;
    vehicleLineDD.add(vehicleLineOp);
}

Edit: Here's a working example that should work in both IE11 and IE8:

 function populate() { var arr = document.getElementById("input").value.split("\\n"); var vehicleLineOp; var vehicleLineDD = document.getElementById("vehicleLineDD"); vehicleLineDD.innerHTML = ""; for (var i = 0; i < arr.length; i++) { vehicleLineOp = document.createElement("option"); vehicleLineOp.text = arr[i]; vehicleLineOp.value = arr[i]; vehicleLineDD.add(vehicleLineOp); } } var btn = document.getElementById("btnPopulate"); if (btn.addEventListener) { btn.addEventListener("click", populate); } else { btn.attachEvent("onclick", populate); } 

 Add each choice as a new line in the text area below, thn click "Populate Dropdown":<br/> <textarea id="input" style="vertical-align:top;height:4em;">Example 1 Example 2 Example 3</textarea> <input type="button" value="Populate Dropdown" id="btnPopulate" /> <br/> <select id="vehicleLineDD"></select>