CODEWITHSUNDEEP
javascript
Abhinav Parashar
Abhinav Parashar

Reputation: 649

Adding option elements using .innerHTML in IE is not working

I have a variable ddEmail having value 

<option value="[email protected]" selected="">[email protected]</option>.

When I try to put it in select element using

document.getElementById("txtEmail").innerHTML = ddEmail;

then in Firefox document.getElementById("txtEmail").innerHTML shows me the same value as of ddEmail while in IE it shows [email protected]</option>

Is there any way to resolve it?

Upvotes: 0

Views: 87

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074238

As you've discovered, you can't reliably use innerHTML to set the options of an existing select.

The best way it through the select's options property:

var option = new Option("[email protected]", "[email protected]");
//  Option text --------^            ^---- option value
option.selected = true;
document.getElementById("txtEmail").options.add(option);

Note that for historical reasons, it's add, not push. push works on lots of browsers, but not all of them.

Also note that the above assumes that either there are no options in the select, or you just want to add this one, not replace all of the ones already there with it. If you want to remove the previous options:

var sel = document.getElementById("txtEmail");
sel.options.length = 0;
sel.options.add(option);

Upvotes: 1

Related Questions