Почему динамическое заполнение элемента списка выпадающего списка с использованием 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 функцию, чтобы использовать функции вместо $([html]), appendTo и empty функции JQuery в те createElement, add и remove.

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

Answer 2

Вы можете использовать метод 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); 
     } 
    } 
} 

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

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); 
     } 
    } 
}