Почему динамическое заполнение элемента раскрывающегося списка выбора с использованием JavaScript не работает в IE?

Question

У меня есть элемент

Я использую приведенный ниже код для очистки элементов

, а затем перезагружаю их новыми. Работает в Firefox 3.6.6 и Chrome 5.0.

function loadPickerFromObject(pickerControl, values) {
    pickerControl.empty();
    for (var nameProperty in values) {
        if (!$.isFunction(values[nameProperty])) {
            var option = $("<option></option>")
                .text(values[nameProperty])
                .attr("value", nameProperty)
                .appendTo(pickerControl);
        }
    }
}

(я не люблю писать javascript и стараюсь держаться от него подальше, если есть лучший способ динамического заполнения элемента

Это не работает в IE 8. Когда я отлаживаю с помощью Visual Studio, я вижу, что новые элементы были загружены правильно, но когда я проверяю страницу, они не обновляются и отображают старые элементы.

Что с этим? Должны отображаться элементы, отображаемые в окне Текст визуализатора (первый снимок экрана). Почему не отображаются новые значения?

Answer 1

Я взглянул на функцию jQuery empty(), и она вызывала removeChild внутри.Похоже, что IE не работает надежно с removeChild, вызванным для элемента <select>.

Поэтому я переписал свою функцию loadPickerFromObject, чтобы использовать функции createElement, add и removeвместо функций jQuery $([html]), appendTo и empty.

Мой код теперь работает правильно в Chrome, Firefox и IE.

Answer 2

GiddyUpHorsey правильный, проблема с removeChild.Существует очень простой способ очистки select.

mySelect.options.length = 0

Так что вы можете сделать это:

function loadPickerFromObject(pickerControl, values) {
    pickerControl[0].options.length = 0;
    for (var nameProperty in values) {
        if (!$.isFunction(values[nameProperty])) {
            pickerControl.add("<option></option>")
            .text(values[nameProperty])
            .attr("value", nameProperty);
        }
    }
}

Answer 3

Internet Explorer любит кешировать данные.

Попробуйте CTRL + F5.

И вы можете использовать CTRL + SHIFT + DEL, чтобы вызвать диалоговое окно, в котором вы можете явно очистить кеш.

Если это имеет значение, вы можете подумать о добавлении заголовков, чтобы попытаться остановить это. Например:

<META HTTP-EQUIV="cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Судя по всему, вы делаете ajax-запросы на получение данных?
Вы также можете попробовать:

jQuery.ajaxSetup({ cache: false });

Answer 4

Я думаю, было бы еще лучше, если бы вы построили одну строку html и просто добавили ее в конец. вместо того, чтобы манипулировать дом каждый раз. как то так:

function loadPickerFromObject(pickerControl, values) {  
    pickerControl.empty();  
    var optionsHtml;

    for (var nameProperty in values) {  
        if (!$.isFunction(values[nameProperty])) {  
            optionsHtml += "<option value='" + nameProperty  + "'>" + 
                                values[nameProperty] + 
                           "</option>";
        }  
    }

    pickerControl.append(optionsHtml);

}

Answer 5

Вы можете использовать метод add (). Итак, ваш код будет выглядеть так:

function loadPickerFromObject(pickerControl, values) {
    pickerControl.empty();
    for (var nameProperty in values) {
        if (!$.isFunction(values[nameProperty])) {
            pickerControl.add("<option></option>")
            .text(values[nameProperty])
            .attr("value", nameProperty);
        }
    }
}