javascript - Adding option elements using .innerHTML in IE - Stack Overflow

admin管理员组

文章数量:1278722

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.

.html

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./Resume/signUp.html

• javascript
• internet-explorer
• innerhtml

Share Improve this question Follow edited Dec 19, 2011 at 6:33 ThinkingStiff 65.4k3030 gold badges147147 silver badges241241 bronze badges asked Dec 19, 2011 at 5:54 Dr.KnowitallDr.Knowitall 10.5k2424 gold badges8787 silver badges136136 bronze badges 2

• I don't think that IE let's you .innerHTML = '<options/>';. You have to use DOM methods. – Jared Farrish Commented Dec 19, 2011 at 6:00
• If I remember correctly this is a very long standing bug with IE. support.microsoft./kb/276228 This bug report was filed in 2003. I ran into it once and the easiest solution is use Adam's answer. – qw3n Commented Dec 19, 2011 at 6:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Based on your ment that it isn't generating your list, and Jared's ment 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 ment, the following may offer you a bit of a performance advantage:

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

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/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;

use Jquery

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

本文标签： javascriptAdding option elements using innerHTML in IEStack Overflow