Question

I have a little script that generates a select field and selects the appropriate option when it’s generated. It looks a bit like this:

options.each(function (option) {
    var optionString = "<option id='" + option.id + "' value='" + option.value + "'>" + option.text + "</option>";
    $('selectField').insert(optionString);
    if(option.selected) {
        toBeSelected = option.id;
    }
});
$(toBeSelected).setAttribute('selected','selected');

Now the above script works fine in Chrome and Firefox, but in IE it will always select the last element in the list. so say I was generating a list of options ['a','b','c','d'], ‘d’ would always be selected.

Does anybody have an idea what could be causing this?

UPDATE:
Okay, I found a solution to this, and it involved replacing the ‘insert’ with generating the option nodes manually, a bit like the following:

var newOption = document.createElement('option');
newOption.setAttribute('value',option.value);
newOption.innerHTML = option.text;
if(option.selected) {
    newOption.selected = true;
}

$('selectField').appendChild(newOption);

I’m guessing the issue lied with how the prototype insert() works, although I’m just glad the problem is solved.

I’ll reformat this as an answer once the 8 hours are up to answer my own question.

Thankyou all for your input in this

Answer 1

Okay, I found a solution to this, and it involved replacing the ‘insert’ with generating the option nodes manually, a bit like the following:

var newOption = document.createElement('option');
newOption.setAttribute('value',option.value);
newOption.innerHTML = option.text;
if(option.selected) {
    newOption.selected = true;
}

$('selectField').appendChild(newOption);

I’m guessing the issue lied with how the prototype insert() works, although I’m just glad the problem is solved.