document.getElementById (). innerHTML для тега выбора не работает в IE

Question

У меня есть следующий простой скрипт

---

<input type="button" onclick="document.getElementById('a').innerHTML = '<option>something</option>';"/>    
 <select id="a" style="width: 150px;">
</select>

, но он не работает в IE.не могли бы вы сказать мне, почему?спасибо

Answer 1

Вам будет лучше, если сценарий AJAX вернет объект JSON, содержащий нужные параметры, а затем использует методы DOM для создания узлов параметров, соответствующих им.

Если вам действительно нужно сделать это со строками HTML, способ сделать это - написать совершенно новый элемент <select> с опциями внутри. Затем вы можете скопировать информацию из узлов <option> в выбранный вами объект.

var select= document.getElementById('a');
select.options.length= 0;

var div= document.createElement('div');
div.innerHTML= '<select>'+options+'</select>';
var options= div.firstChild.options;
for (var i= 0; i<options.length; i++) {
    var o= options[i];
    select.options[i]= new Option(o.text, o.value, o.selected);
}

Answer 2

Или просто используйте jQuery и html() вместо innerHTML ...

Итак ...

$("#a").html("<option>Whatever</option>");

Отлично работает во всех браузерах для всех объектов!

Answer 3

Используйте этот код:

var optionElement = document.createElement("option");
optionElement.innerHTML = "some text here";

document.getElementById('a').appendChild(optionElement);

Answer 4

IE не любит, когда вы делаете такие вещи для таких вещей. То же самое касается установки innerHTML таблиц.

Вы должны научиться делать вещи способом DOM .... например, используя createElement ("OPTION"), затем appendChild() (сначала удаляя детей с removeChild(), если необходимо). В целом это лучше, чем innerHTML.