Список опций выбора jQuery недостаточно быстро обновляется в IE6

Question

У меня есть список SELECT, который я заполняю на основе результатов ajax-вызова, затем выбираю один из параметров на основе ранее установленной переменной. Это прекрасно работает на IE8, но на IE6 это не так.

Вот оригинальная функция:

function LoadCategories(jdata)
{
    var options = '';
    for (var i = 0; i < jdata.length; i++)
    {
        options += '<option value="' + jdata[i].CategoryName + '">' + jdata[i].CategoryName + '</option>';
    };
    $("select#categorySelect").html(options);
    $("select#categorySelect").val(currentPatientCategory).attr('selected',true);
};

В IE6, как есть, генерируется ошибка: «Не удалось установить выбранное свойство. Неопределенная ошибка.»

ЕСЛИ я поменяю последнее утверждение на:

setTimeout('$("select#categorySelect option[value=" + currentPatientCategory + "]").attr("selected", true)', 1000);

Кажется, это работает. Я также попытался изменить .html () для использования .append (), .appendTo (), используя соответствующий синтаксис для них. Я также попытался использовать переменную для выбранного элемента без успеха. Опять же, они работают на IE8, но не IE6. Установка оповещения () перед выбранным значением также работает. Кажется, что опции не помещаются в список достаточно быстро, чтобы следующий оператор мог их реально найти, если я не задержу выбор каким-либо образом.

Есть ли способ заставить это работать правильно, без какого-либо «обходного пути», такого как setTimeout или перемещения выделения в другое место, эффективно задерживая его выполнение на некоторое время?

Примечание: если я изменю 1000 на 100 в setTimeout, он будет работать часть времени, а не частично, поэтому я тоже не полностью доверяю этому решению.

Использование jQuery 1.4.2

Примечание. Клиентская база требует поддержки IE6 из-за устаревших компьютеров и обновления правил / проблем в очень строгом окружении.

РЕДАКТИРОВАТЬ: Примечание, я наконец-то дошел до конца. Между созданием некоторых данных через ajax и использованием, проявившимся в IE6, существовало расовое состояние. Я решил, переместив некоторые утверждения в своем коде, чтобы пуленепробиваемо защитить решение от неразрешенных объектов данных, сгенерированных как таковые. Большое спасибо плакатам, которые указали мне жизнеспособное направление для решения этой проблемы.

Answer 1

Я даже не могу поверить, что это будет работать с использованием .html() вместо .append() или .appendTo().Что вы в основном делаете, это перезаписываете HTML-код самого select element.
Так что вам действительно следует использовать .append().

Еще более странно звучит вещь setTimeout().

Я думаю, вам нужно заменить эту строку:

$("select#categorySelect").val(currentPatientCategory).attr('selected',true);

на эту:

$("select#categorySelect").find('option').eq(currentPatientCategory).attr('selected', 'selected');

.. и не забудьте использовать .append() ..

Ссылка: .append () , .eq ()

Answer 2

$("select#categorySelect").val(currentPatientCategory).attr('selected',true);

val(currentPatientCategory) устанавливает выбранную опцию на ту, значение которой соответствует currentPatientCategory. Все нормально, вам не нужно искать правильный элемент option, чтобы установить selected вкл.

Понятия не имею, для чего нужен цепной вызов .attr. A <select> не имеет selected свойства. Я думаю, это то, что ошибка пытается сказать вам.

options += '<option value="' + jdata[i].CategoryName + '">' + jdata[i].CategoryName + '</option>';

Это опасно. Вы включаете некоторый текст в HTML-разметку без HTML-экранирования. Если в этом тексте есть символы <, & или ", ваша разметка будет нарушена, и если текст отправлен пользователем, у вас возникла проблема безопасности межсайтового скриптинга.

Если вы создаете HTML, включая текстовые строки, вы должны HTML-экранировать эти символы в <, & и " соответственно. Но, как правило, проще использовать методы установки свойств, чтобы устанавливать их, а не копаться в разметке:

$('#categorySelect').empty();
for (var i= 0; i<jdata.length; i++) {
    var option= $('<option/>', {text: jdata[i].CategoryName, val: jdata[i].CategoryName});
    $('#categorySelect').append(option);
}

Однако еще более простой способ DOM старой школы:

var options= $('#categorySelect')[0].options;
options.length= 0;
for (var i= 0; i<jdata.length; i++)
    options[i]= new Option(jdata[i].CategoryName);