Unable to set selection in select drop-down with javascript in IE8
Given the the following javascript function,
function switch_plug_drop_down(plug_id) {
selector = document.getElementById('group_1');
if (plug_id == "1") {selector.options['product_253'].selected = true;}
if (plug_id == "2") {selector.options['product_217'].selected = true;}
if (plug_id == "3") {selector.options['product_254'].selected = true;}
if (plug_id == "4") {selector.options['product_255'].selected = true;}
if (plug_id == "5") {selector.options['product_256'].selected = true;}
}
and the following HTML select element (generated by cs-cart)
<select name="product_data[245][configuration][1]" id="group_1" onchange="fn_check_exceptions(245);fn_check_compatibilities(1,'select','S');">
<option id="product_255" value="255" >Power Adapter Plug Choice AUS<span class="price"></span></option>
<option id="product_217" value="217" >Power Adapter Plug Choice EURO<span class="price"></span></option>
<option id="product_256" value="256" >Power Adapter Plug Choice JAPAN<span class="price"></span></option>
<option id="product_254" value="254" >Power Adapter Plug Choice UK<span class="price"></span></option>
<option id="product_253" value="253" selected="selected"} >Power Adapter Plug Choice USA / Canada<span class="price"></span></option>
</select>
This works fine in FF 3.6.8, Chrome 5.0.375, but fails in IE 8 (browser mode 8, document mode IE8 Standard)
I am getting an error in IE 8's javascript debugger :
'selector.options.product_217' is null or not an object
and this corresponds to selector.options['product_217'].selected = true;
in the js code above.
Also, jQuery 1.3.n is on the site and works fine.
Does anybody know what is going on and how to fix it?
UPDATE:
I implemented Tim's solution, but had the values loaded on automatically:
sele开发者_开发技巧ctor = document.getElementById('group_1');
for (var i = 0; i < selector.children.length; ++i) {
var child = selector.children[i];
if (child.tagName == 'OPTION') optionIndicesByPlugId[child.value]=''+i;
}
(this code came from this SO question's first answer)
and the plug_id that is passed to the switch_plug_drop_down
function is not a 1-5 number anymore but the value in the select.
A select's options
property is not guaranteed to contain properties corresponding to the value of each option. Most browsers (not IE) implement it as HTMLOptionsCollection
, which is confusingly specified: the DOM spec and MDC both seem to suggest that non-numeric properties of options
should correspond to names and ids of option elements. So, the most cross-browser approach is to use numeric properties instead.
The easiest way to set which option is currently selected is to use the select's selectedIndex
property:
var optionIndicesByPlugId = {
"1": 4,
"2": 1,
"3": 3,
"4": 0,
"5": 2
};
function switch_plug_drop_down(plug_id) {
var selector = document.getElementById('group_1');
selector.selectedIndex = optionIndicesByPlugId[plug_id];
}
精彩评论