Динамический Drop down не работает в 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); 
} 

Привет, здесь я прилагаю свой код, где я ударил сейчас. Проблема заключается в том, что автомобильLineDD является динамическим. В зависимости от другого падения я должен загрузить значения здесь. Он работает нормально в IE8, но в IE11 все значения поступают правильно, кроме vehicleLineDD.add (vehicleLineOp, null); не добавляет значения, добавляется только последнее значение. Каждый раз, когда меняю первый снимок, я вижу только один вариант. Может ли кто-нибудь помочь мне выйти из проблемы. Заранее спасибо.

Answer 1

Вам необходимо создать новый элемент option для переменной vehicleLineOp (используя код, аналогичный vehicleLineOp = document.createElement("option");), в противном случае вы просто постоянно обновляете тот же элемент с различными атрибутами текста и значения (поэтому только последний применяемый текст и значение появляется).

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: Вот рабочий пример, который должен работать как в IE11 и 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>