/    Sign up×
Community /Pin to ProfileBookmark

adding select options dynamically: IE says Invalid argument

Copy linkTweet thisAlerts:
Sep 20.2007

I’m trying to write a page in which the options available from a select pulldown form element get populated dynamically. Everything works great in Firefox, but with IE, every time I call selectElement.options.add(optionElement), the script stops with the error “Invalid argument”. Here is a very simplified simplified version of the code:

[code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>ie test</title>
</head>
<body>
<form>
<select id=”s”>
<option value=”a”>first</option>
<option value=”b”>second</option>
</select>
</form>
<script type=”text/javascript”>
var s = document.getElementById(‘s’);
var newOpt = document.createElement(‘option’);
newOpt.value = “c”;
newOpt.innerHTML = “third”;
s.options.add(newOpt);
</script>
</body>
</html>
[/code]

Any help is greatly appreciated!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangSep 20.2007 — newOpt.[COLOR="SeaGreen"]text[/COLOR] = "third";
Copy linkTweet thisAlerts:
@TJ111Sep 20.2007 — Use the "new option" command.

[code=php]
<script type="text/javascript">
var s = document.getElementById('s');
s.options[2] = new Option ("third", "c");
</script>[/code]
Copy linkTweet thisAlerts:
@letheauthorSep 20.2007 — newOpt.[COLOR="SeaGreen"]text[/COLOR] = "third";[/QUOTE]
Hi Fang-

Yeah, that fixed the problem. And so fast! Thanks a million!

Actually, the error first arose in a slightly different context. This was a very simplified example of the error. So I'd like to show you another context where this error occurs:

<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;ie test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;select id="sel1"&gt;
&lt;option value="a"&gt;first&lt;/option&gt;
&lt;option value="b"&gt;second&lt;/option&gt;
&lt;/select&gt;
&lt;select id="sel2"&gt;
&lt;option value="c"&gt;third&lt;/option&gt;
&lt;option value="d"&gt;fourth&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
&lt;script type="text/javascript"&gt;
var sel1 = document.getElementById('sel1');
var sel2 = document.getElementById('sel2');
sel2.options.add(sel1.options[0]);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


This time, I'm not accessing opt.text or opt.innerHTML, but rather just appending an option from one select into another select. This works great in Firefox, and it even deletes the option from the first select as it adds it to the second, and the option remains selected in the new select element if it was selected in the old, which is useful. But with IE, you get "Invalid argument".

I guess I can get around this by creating a new element, copying the value, text (thanks Fang), id, class, and all the other attributes, then adding that to the second select, and then removing the option from the first select. This is annoying, because (in my real world code) the options have several attributes and event handlers. But if that's the only way it will in IE, that's what I'll do. I just thought I'd see if anyone could offer any advice for this situation.

Thanks again.
Copy linkTweet thisAlerts:
@FangSep 21.2007 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;ie test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;select id="sel1"&gt;
&lt;option value="a"&gt;first&lt;/option&gt;
&lt;option value="b"&gt;second&lt;/option&gt;
&lt;/select&gt;
&lt;select id="sel2"&gt;
&lt;option value="c"&gt;third&lt;/option&gt;
&lt;option value="d"&gt;fourth&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
&lt;script type="text/javascript"&gt;
var sel1 = document.getElementById('sel1');
var sel2 = document.getElementById('sel2');
//sel2.options.add(sel1.options[0], 0); Fx only, 2nd arg. is index
var clone=sel1.options[0].cloneNode(true);
sel1.options[0]=null;
sel2.appendChild(clone); // last option
//sel2.insertBefore(clone, sel2.firstChild); // first option
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

the options have several attributes and event handlers[/QUOTE]
Event handlers will not work in [I]option[/I] with IE
Copy linkTweet thisAlerts:
@letheauthorSep 21.2007 — Thanks for your help.
×

Success!

Help @lethe spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...