ansaurus

Question

Answer 1

+3 A:

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

jerjer 2009-10-06 11:15:47

Can do that but why is the above not working..I just wanted to know that.

Arkid 2009-10-06 11:20:16

The above is not working because IE does not let you use innerHTML on a select.

epascarello 2009-10-06 11:31:22

Answer 2

A:

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.

roosteronacid 2009-10-06 11:35:19

There's no need for this. It has been possible to repopulate a select's options in all major browsers for over a decade by populating the select's `options` collection with `Option` objects.

Tim Down 2009-10-06 12:03:26

@Tim Down: Try and read my answer again. I quote: _"It doesn't seem to work on IE. Can anyone suggest the problem?"._ He wants to know what the problem is. And I've given him that answer. On top of that: I am in fact _encouraging_ him to use the pure DOM approach and skip the innerHTML approach

roosteronacid 2009-10-06 12:28:58

I had read and understood your answer when I commented. I have since decided my downvote was too hasty, but apparently can't remove it unless you edit your answer, so I'm sorry about that and will try and change my habits since this is the second time I've done that this week. What I objected to in your answer was the outlining of a technique we both agree is bad; I think it's better to encourage good techniques. I'm also not sure that the pure DOM approach works in all reasonable browsers but my memory of it is hazy so I could be wrong.

Tim Down 2009-10-06 12:44:44

Answer edited. And I wholeheartedly agree with encouraging best practices--I do that myself (often resulting in me doing the same thing you are.. to a somewhat lesser extent).

roosteronacid 2009-10-06 12:50:37

Thanks. Downvote removed, habits hopefully altered.

Tim Down 2009-10-06 13:23:13

Answer 3

A:

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

Tim Down 2009-10-06 12:00:51

ansaurus

tags:

views:

answers:

Dropdown not getting populated in IE?

related questions