Dropdown not getting populated in IE?
I am trying to get the values to a select list for subcategories on the basis on what is chosen in categories select list. It doesn't seem to work on IE. Can anyone suggest the problem?
In the php file I have
<body onload="setSubcategories(default_value);">
In the js file I have something like
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 ? " sele开发者_StackOverflowcted" : "";
html += '<option' + selected + '>' + subcategoriesArr[i] + '</option>\n';
}
subelem.innerHTML = html;
}
Try using DOM equivalent:
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);
}
Use the time-honoured method of creating Option objects and adding them to the select's options collection:
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);
}
I've encountered this bug before. You can't set the innerHTML on a select element in Internet Explorer. You have to wrap the select element in a div (or some other element) and then generate the markup for a new select element which includes the options you want to insert.
Here's a little pseudo-code:
- Target the select
- Wrap the select in a div element
- Store the markup of the select for later reuse (step #5) and clear the contents of the div
- Generate markup for options
- Include that markup in the stored select markup
- Put the whole thing inside the div surrounding the select
Needless to say: I ended up using the pure DOM approach.. Which is a shame, since it's much slower than using innerHTML.
加载中,请稍侯......
精彩评论