Как динамически обновить HTML «выбрать» поле в IE

Question

У меня есть HTML-элемент "select", который я динамически обновляю с помощью кода, похожего на этот:

var selector = document.getElementById('selectorId');    
for (var i = 0; i < data.length; ++i)
{
  var opt = document.createElement('option');
  opt.value = data[i].id;
  opt.text = data[i].name;
  selector.appendChild(opt);
}

Прекрасно работает в Firefox, но IE7 не меняет размер списка в соответствии с новыми данными. Если окно списка изначально пустое (что в моем случае), вы вряд ли увидите какие-либо опции, которые я добавил. Есть лучший способ сделать это? Или способ исправить это для работы в IE?

Answer 1

Установите свойство innerHTML объектов параметров вместо их text.

var selector = document.getElementById('selectorId');    
for (var i = 0; i < data.length; ++i)
{
  var opt       = document.createElement('option');
  opt.value     = data[i].id;
  opt.innerHTML = data[i].name;
  selector.appendChild(opt);
}

Работает на IE6, только что протестировано. Не ломается на FF3, поэтому я думаю, что это оно.

(Я выбрал «innerHTML», потому что это работает во всех браузерах. Чтобы установить буквальный текст, вы должны использовать «innerText» в IE и «textContent» в FF, и вам, вероятно, придется проверить его в другом месте, как хорошо. До тех пор, пока в свойствах «name» нет специальных символов (&, <,>), будет достаточно «innerHTML».)

Answer 2

Вам не нужно манипулировать DOM для этого. Попробуйте вместо этого

var selector = document.getElementById('selectorId');  
for (var i = 0; i < data.length; ++i) {
    selector.options[selector.options.length] = new Option(data[i].name, data[i].id);
}

Answer 3

После добавления элемента option введите select.style.width в auto, даже если он уже равен auto.

Если это не работает, очистите select.style.width до "", а затем снова восстановите select.style.width до auto.

Это позволяет Internet Explorer пересчитать оптимальную ширину select элементов.

Answer 4

Установите ширину поля выбора явным образом, используя, например,. стиль CSS «ширина», вместо того, чтобы позволить браузеру угадывать ширину по его содержимому.

Answer 5

Вы можете попробовать заменить весь элемент select из сгенерированного HTML-кода или взломать, удалив элемент из DOM и прочитав его.