Question

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:

selector = 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.

Answer 1

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];
}