Выпадающий список не заполняется в IE?
Я пытаюсь получить значения в список выбора для подкатегорий на основе того, что выбрано в списке выбора категорий. Похоже, это не работает в IE. Кто-нибудь может предложить проблему?
В php-файле у меня есть
<body onload="setSubcategories(default_value);">
В файле js у меня есть что-то вроде
subcategories = new Array();
subcategories['Lifestyle'] = ['All',
'Beauty (SHC)',
'Skin Care',
'Hair Care',
'Oral Care',
'Cosmetics',
'Footwear',
'Jewelry',
'Male Styling',
'Women Hygiene',
'Womens magazines',
'Apparels',
' Fashion (AFA)',
'Spa',
'Accessories'
];
subcategories['Automobiles'] = ['All',
'Automobiles (C&B)',
'Cars',
'Bikes',
'Car Magazine',
'Bikes Magazine',
'Accessories'
];
subcategories['FoodandBeverage'] = ['All',
'Snacking',
'Confectionary',
'Beverages',
'Generic F&B',
'Restaurant Review',
'Food Reviews',
'Wines & Vineyards'
];
function setSubcategories(default_value){
default_value = (typeof default_value == 'undefined') ?
'All' : default_value;
var elem = document.getElementById('id-category');
if(elem == null){return false;}
var category = elem.value;
var subelem = document.getElementById('id-subcategory');
var html = "";
var subcategoriesArr = subcategories[category];
for(var i=0; i < subcategoriesArr.length; i++){
var selected = subcategoriesArr[i] == default_value ? " selected" : "";
html += '<option' + selected + '>' + subcategoriesArr[i] + '</option>\n';
}
subelem.innerHTML = html;
}
3 answers
Попробуйте использовать эквивалент DOM:
var subcategoriesArr = subcategories[category];
for(var i=0; i < subcategoriesArr.length; i++){
var option = document.createElement('option');
option.value = option.text = subcategories[i];
option.selected = (subcategoriesArr[i] == default_value);
subelem.appendChild(option);
}
Используйте проверенный временем метод создания объектов Option и добавления их в коллекцию options избранного:
var subcategoriesArr = subcategories[category];
var i, len, selected, optionText;
// Clear any existing options
subelem.options.length = 0;
// Create new options
for (i = 0, len = subcategoriesArr.length; i < len; i++){
selected = (subcategoriesArr[i] === default_value);
optionText = subcategoriesArr[i];
subelem.options[i] = new Option(optionText, optionText, selected, selected);
}
Я уже сталкивался с этой ошибкой раньше. Вы не можете установить innerHTML для элемента select в Internet Explorer. Вы должны обернуть элемент select в div (или какой-либо другой элемент), а затем создать разметку для нового элемента select, которая включает параметры, которые вы хотите вставить.
Вот небольшой псевдокод:
- Выберите целевой объект
- Оберните выделение в элемент div
- Сохраните разметку выбора для последующего повторного использования (шаг № 5) и очистите содержимое div
- Создать разметку для опций
- Включите эту разметку в сохраненную разметку выбора
- Поместите все это в div, окружающий выбранный
Излишне говорить: в итоге я использовал подход pure DOM.. Что очень жаль, так как это намного медленнее, чем использование innerHTML.