Adding option elements using .innerHTML in IE

Question

I have a txt variable that contains my html string that I need to set for a drop down list. The code works fine in all the other browsers except for IE. The basic code is shown below.

while loop with some more code

document.getElementById('theSelector').innerHTML = txt;

where 'theSelector' is the id of my select element for my form

So basically IE poops out and doesn't generate my list. I'll post my webpage below if you'd like to look at the source and everything that I'm doing. If you want to see how the site should function just run it in another browser that's not ie.

http://1wux.com/Resume/signUp.html

Dannettedanni

I don't think that IE let's you .innerHTML = '<options/>';. You have to use DOM methods. – Kautz

If I remember correctly this is a very long standing bug with IE. support.microsoft.com/kb/276228 This bug report was filed in 2003. I ran into it once and the easiest solution is use Adam's answer. – Septimal

Answer 1

Based on your comment that it isn't generating your list, and Jared's comment that you're trying to add options, try something like this:

var list = document.getElementById('theSelector');
var newOp = document.createElement("option");
newOp.text = "Txt";
newOp.value = "1";
list.options.add(newOp);

EDIT

Per Jared's comment, the following may offer you a bit of a performance advantage:

list.options[list.options.length] = newOp;

Ardehs

@JaredFarrish - above and beyond creating that fiddle - +1 to you - you're one away from a shiny badge :) And which method - add instead of push, like arrays usually use? – Ardehs

Isn't one better supported? Honestly, I usually just do list.options[list.options.length]. Force of habit, and I remember hearing recently it's considered more efficient. – Kautz

Here is the article I read: scottlogic.co.uk/2010/10/javascript-array-performance, although apparently the method I have above is not the most efficient, array[i] is. – Kautz

@JaredFarrish- that's really interesting - I added an update based on your comment – Ardehs

@JaredFarrish - I wrote my edit as you were writing the above comment. We do make a good team :) – Ardehs

The fastest way apparently is to just use an iterator (which makes sense). If the OP is adding a bunch of options, using an iterator would be significantly faster, apparently. – Kautz

@Jared - it looks like your example you're calling add each time. I thought the point of your original comment was that setting the [.length] index was preferable? – Ardehs

In the comment where I linked to the article, I noted that array[i] was fastest. array.length is still faster than .push(), though. – Kautz

@Jared - sure, but shouldn't it be list.options[i] = newOp; ?? Sorry if I'm missing something. – Ardehs

@Jared - bingo. Thanks, I'll put this idiom into my toolkit :) – Ardehs

Answer 2

As others have mentioned, this is a bug in all version of IE. I would use @AdamRackis's solution, but if you must build your HTML with string, the only workaround seems to be use outerHTML and include your <select> in the string.

Demo: http://jsfiddle.net/ThinkingStiff/TWYUa/

HTML:

<select id="select"></select>

Script:

var options = '<select id="select"><option>one</option><option>two</option></select>';
document.getElementById( 'select' ).outerHTML = options;

Crystie

Answer 3

use Jquery

$('#theSelector').html(txt);

Mezzo