Выберите параметры, не отображаемые в IE

Question

У меня есть динамически генерируемый выбор с некоторыми опциями, и он хорошо показывает опции в обычных браузерах, но его пустые опции в IE. Вот сгенерированный HTML:

<select name="0" id="custom_0" style="border-bottom: #c0cedb 1px solid; border-left: #c0cedb 1px solid; background-color: #ededed; width: 280px; font-size: 0.87em; border-top: #c0cedb 1px solid; border-right: #c0cedb 1px solid">
    <option id="1000" value="0" name="00">1x2GB ECC DDRIII 2GB ECC DDRIII</option>
    <option id="1001" value="10" name="01">2x2GB ECC DDRIII 4GB ECC DDRIII (+10.00 €)</option>
</select>

Я не могу показать вам javascript, так как его так много, и я смогу сделать его простым только для демонстрации. Может быть, некоторые из вас имели бы подобный опыт и могли бы понять это. Спасибо

Я добавил немного JavaScript:

$('#custom_order').append('<tr id="custom_'+category+'_row"><td'+padding+'>'+header+'<select id="custom_'+category+'" name="'+category+'" style="background-color:#EDEDED;border:1px solid #C0CEDB;width:280px;font-size:0.87em"></select>'+plusspan+'</td></tr>');

for (var i=0;i<components[category]['value'].length;i++){
    $('#custom_'+category).append('<option id="'+components[category]['value'][i]['id']+'" value="'+components[category]['value'][i]['price']+'"></option>');
    removals(category,i);
    dependencies(category,i);
    selectInput(category);
}
getDiff(category);

Функция getDiff () добавляет значения к опциям с помощью функции html (). Странно то, что если я оповестил html опции сразу после функции getDiff (), она показывает заполненное значение. И это я поместил функцию getDiff () в цикл for, где генерируются параметры, он заполняет значения и показывает их в IE, но не последний.

Я вызываю getDiff () вне цикла для оптимизации, и, поскольку я могу добавить значения позже, после того как все параметры будут сгенерированы. Ну, по крайней мере, я думал, что смогу, так как он работает на Firefox и Chrome.

Answer 1

У меня была точно такая же проблема, когда создание опций в вашем списке выбора не отображается в IE.

Я не мог понять, что происходит, так как мой код отлично работал в FF, поэтому я добавил FireBug Lite на свою страницу и попытался просмотреть раскрывающийся список.

Я мог видеть, что параметры были созданы на основе выпадающего списка, но IE просто не отображал их.

Похоже, это проблема рендеринга, влияющая на IE 7 (я не тестировал ни в одной другой версии).

Что выдало это за то, что когда вы просматриваете свою страницу, FireBug применяет эффект выделения к элементу управления в фокусе, это выделение фактически вызывает раскрывающийся список, в котором отображаются отсутствующие параметры.

Так что я решил, что применения изменения стиля к выпадающему списку должно быть достаточно для решения проблемы.

$('<option value="1">One</option><option value="2">Two</option>')
.appendTo($('#MyDDL'));
$('#MyDDL').css('display', 'inline'); 

Теперь вы сможете увидеть ваши варианты.

Answer 2

У меня тоже была эта проблема.Я использовал IE 8. Я использовал оператор $ .each, чтобы заполнить свой выпадающий список следующим образом:

$.each(myObject.categories, function (count, item) { $('#ddlCategories').append(new Option(item, count)); });

Это хорошо работало в chrome и FF, но не в IE.Я переключился на:

$.each(myObject.categories, function (count, item) { $('#ddlCategories').append('<option value="' + count + '">' + item + '</option>'); });

, и он работал нормально во всех 3 браузерах.

Answer 3

У меня была эта проблема, когда я использовал innerHTML для вставки параметров, сгенерированных как текстовые строки.Решение состояло в том, чтобы сделать работу должным образом, добавив опции к вашему выбору, например

var optionRow = document.createElement("option");
optionRow.setAttribute("value", varName1);
var textNode = document.createTextNode(varName2);
optionRow.appendChild(textNode);
document.getElementById("id_of_select").appendChild(optionRow);

IE был счастлив тогда.(Я тоже.)

Answer 4

Не зная вашего JavaScript, трудно ответить на этот вопрос.Можете ли вы привести пример кода, который демонстрирует, как JavaScript выполняет динамическую генерацию.

Тем не менее, я столкнулся с проблемами в этой области до сих пор.Как правило, это связано с указанием «параметров» в качестве HTML для выбора, а не с созданием элемента «SELECT» DOM, созданием связанных элементов «OPTIONS» DOM и последующим корректным добавлением его в DOM.

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

Answer 5

У меня были похожие проблемы.После долгих раздумий, следуя предложениям других респондентов, я обнаружил, что единственный способ заставить вещи работать в IE8 - это создать полную строку параметров и затем сохранить ее с $ (# idOfMyElement) .html (некоторые данные)

> <select id='mySelect'>
>     <option>Dummy placeholder</option>  
   </select>
> 
> <script type='text/javascript'>
> 
>     $.ajaxSetup({cache: false});    // Or next time IE will not run your script
> 
>     function setOption(...) {
>        ...
>        data = ' ... ';
>        $('#mySelect').html(data);
>        ...
>     }  </script>

Answer 6

Вы получаете это поведение, потому что id и name атрибуты не ожидаются в тегах option некоторыми браузерами.