Как динамически обновить окно выбора 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?
Ответы 5
Вы можете попробовать заменить весь элемент select из сгенерированного html-кода или в качестве взлома удалить элемент из DOM и прочитать его.
Установите свойство 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" будет достаточно.)
Попробуйте и почувствуйте разницу. Стандартный или нет, он работает в основных браузерах и решает конкретную проблему. Я указал, что вы тоже можете сделать это по-другому.
Кстати о стандартах: я видел, как люди делали (и рекомендовали) невероятно безумные вещи, чтобы обойти тот факт, что атрибут целевой ссылки не соответствует стандарту. Он не сделал их код лучше, он просто сделал его «действительным» для парсера SGML. Ура.
Для этого не нужно манипулировать 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);
}
Как этот нет манипулирует DOM? :-) Но должен признать, работает безотказно. +1
Я имею в виду document.createElement (который создает произвольные элементы), который вы позже вставляете в DOM (appendChild). В любом случае, есть разные подходы, которые работают для этой конкретной проблемы.
Установите ширину поля выбора явно, используя, например,. стиль CSS «ширина», вместо того, чтобы позволить браузеру угадывать ширину по его содержимому.
После добавления элемента option принудительно установите select.style.width на auto, даже если это уже auto.
Если это не сработает, очистите select.style.width до "", а затем снова восстановите select.style.width на auto.
Это заставляет Internet Explorer пересчитывать оптимальную ширину элементов select.
opt.text - стандартное свойство, поддерживаемое каждым браузером JavaScript вплоть до Netscape somethingancient.0, и не имеет проблем со специальными символами. innerHTML - это нестандартное расширение IE, хотя его используют все современные браузеры. Я не понимаю, почему это действительно победа.