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

У меня есть элемент 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?


html internet-explorer html-select
person Luke Halliwell    schedule 04.11.2008    source источник

Ответы (5)


arrow_upward
4
arrow_downward

Установите свойство 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" будет достаточно.)

person Tomalak    schedule 04.11.2008
comment
opt.text - стандартное свойство, поддерживаемое каждым браузером JavaScript вплоть до Netscape somethingancient.0, и не имеет проблем со специальными символами. innerHTML - это нестандартное расширение IE, хотя его используют все современные браузеры. Я не понимаю, почему это действительно победа. - person bobince; 04.11.2008
comment
Попробуйте и почувствуйте разницу. Стандартный или нет, он работает в основных браузерах и решает конкретную проблему. Я указал, что вы тоже можете сделать это по-другому. - person Tomalak; 04.11.2008
comment
Кстати о стандартах: я видел, как люди делали (и рекомендовали) невероятно безумные вещи, чтобы обойти тот факт, что атрибут целевой ссылки не соответствует стандарту. Это не сделало их код лучше, а просто сделало его пригодным для парсера SGML. Ура. - person Tomalak; 04.11.2008

arrow_upward
4
arrow_downward

Для этого не нужно манипулировать 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);
}
person Marko Dumic    schedule 04.11.2008
comment
Как это не манипулировать DOM? :-) Но должен признать, работает безотказно. +1 - person Tomalak; 04.11.2008
comment
Я имею в виду document.createElement (который создает произвольные элементы), который вы позже вставляете в DOM (appendChild). В любом случае, есть разные подходы, которые работают для этой конкретной проблемы. - person Marko Dumic; 10.11.2008

arrow_upward
2
arrow_downward

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

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

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

person David Gimeno i Ayuso    schedule 10.02.2012

arrow_upward
0
arrow_downward

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

person bobince    schedule 04.11.2008

arrow_upward
-1
arrow_downward

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

person Joeri Sebrechts    schedule 04.11.2008