JQuery Workaround for IE Selects

While trying to append an option to a html select and make it the selected value for a project I was working on, I noticed that although the code worked perfectly in FIrefox, the same code would add a blank entry to my select in IE. After doing some poking around I found this in a bug report on the JQuery website. Since the person reporting the bug posted a workaround, they marked it as will not fix.

Code that works in FF:

$("select[name='MySelect']").append(new Option('value', 'text', selected));
Workaround for IE:

$("select[name='MySelect']").append("<option selected='selected' value='value'> command_value</option>");
These work great for static values. I had a heck of a time finding some code for those of us that want to use variables. After playing with some concatination I came up with this.

$("select[name='MySelect']").append("<option selected='selected' value='" + valueVariable + "'>" + displayVariable + "</option>");
This solved my problem and added the new option to my select box and made it the selected value using the information in my form.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
ike's Gravatar Seems like kind of a long way around to get to adding an option to a select box...

I'm guessing append() is a jQuery-specific function, since the DOM method is appendNode() (which also works afaik).

sel = $("select[name='MySelect']"); // this seems pretty convoluted to start with, but I'll let it slide
sel.options[sel.length] = new Option('value','text',selected);

Should produce the same result... and is the standard JS syntax I believe dating all the way back to the introduction of JS or forms (I don't know which came first).

This should also work:

sel.appendNode(new Option('value','text',selected));

and so should this (courtesy w3schools who say this is part of DOM for select elements):

sel.add(new Option('value','text',selected));

I'm not saying the workaround you posted is "bad", I'm just sayin' there are several ways to do it and I don't think that's the simplest one that will work with IE. I've used the options[x] syntax and the appendNode() syntax both with IE without any problems. Haven't tried add(), that one was new for me.

I actually wasn't familiar with putting the selected value in the new option create statement either... Found this article where someone posted a script that shows 4 arguments, with the 3rd being "defaultSelected" and the 4th being "selected" and says it works all the way back to IE 5 (god I hope nobody's still using that)...


Seems like it might be easier to just created it and set the selected property after the fact. :P

Anyway, there's my 2c.
# Posted By ike | 9/13/08 11:22 PM
Jerry's Gravatar Ike is really funny... Uses words like should this, should that...
but if you had ever TESTED out his code, you would find that
his comments are useless... His code does not work in IE. Period
# Posted By Jerry | 2/10/09 4:47 PM
Copyright © 2008 - Jim Leether BlogCFC was created by Raymond Camden. This blog is running version Contact Jim