Adding new Option() to a select box doesn't work

Rob · Sep 14, 2006

Hi,
Is there anything wrong with this code or does new Option just not work
very well.
I have a select box on my form:
<select name="FirstLine" size="5" style="width:122px;">
</select>

and I have a form element:
<form METHOD="post" ACTION="Scale_New.asp" id="Scale_New"
name="Scale_New">

I'm trying to do something a little more complex but for the sake of
just getting this to work..I've simplified it and this doesn't work
either.

I have a button that calls a javascript function that adds "options" to
the select box.
<button name="FirstLine" onclick="Add1();">Add First Line</button>

and here's my javascript function:
function Add1()
{
document.Scale_New.FirstLine.options[0] = new Option('new text', 'new
value');

}
and I get an error "document.Scale_New.FirstLine.options is null or not
an object"

I've tried changing it to document.forms[0] and changing the options to
options[1] or even options[document.Scale_New.FirstLine.options.length]
and that doesn't work either.
Does anyone see anything wrong here?
I'm using IE 6.

Thanks
Rob

Martin Honnen · Sep 14, 2006

Rob wrote:

<select name="FirstLine" size="5" style="width:122px;">
</select>

<button name="FirstLine" onclick="Add1();">Add First Line</button>

If you need a name for that button then choose one different from the
name for the select. And adding type="button" is a good idea e.g.
<button name="buttonName" type="button" onclick="Add1();">

That should fix it, as least judging from the details you have provided.
If not post a URL.

Ray · Sep 14, 2006

Rob said:
Does anyone see anything wrong here?
I'm using IE 6.

Thanks
Rob

I tried your code unmodified, seems to run fine:

<html>
<head>
</head>
<script>
function Add1()
{
document.Scale_New.FirstLine.options[0] = new Option('new text', 'new
value');

}

</script>
<body>
<button name="FirstLine" onclick="Add1();">Add First Line</button>
<form METHOD="post" ACTION="Scale_New.asp" id="Scale_New"
name="Scale_New">
<select name="FirstLine" size="5" style="width:122px;">
</select>

</form>
</body>

</html>

Tim Slattery · Sep 14, 2006

Rob said:
Hi,
Is there anything wrong with this code or does new Option just not work
very well.
I have a select box on my form:
<select name="FirstLine" size="5" style="width:122px;">
</select>

<form METHOD="post" ACTION="Scale_New.asp" id="Scale_New"
name="Scale_New">

I have a button that calls a javascript function that adds "options" to
the select box.
<button name="FirstLine" onclick="Add1();">Add First Line</button>

and here's my javascript function:
function Add1()
{
document.Scale_New.FirstLine.options[0] = new Option('new text', 'new
value');

}
and I get an error "document.Scale_New.FirstLine.options is null or not
an object"

Your "button" and your "select" have the same "name" attribute:
"FirstLine". I'd guess that although you're trying to access the
select, you're getting the button instead. And the button, clearly,
doesn't have an "options" property.

So give them different names, or give the select group an "id"
attribute, then access it using "document.getElementById()".

Rob · Sep 14, 2006

Ahhh. Thanks guys. Never even thought of that.

Rob

How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
How to make a div select work?	5	Jan 13, 2022
Page do not work, when adding php code	1	Sep 16, 2022
Multi select options in a menu	1	Oct 30, 2022
Show/Hide HTML Table Columns using SELECT option	1	Nov 9, 2020
An unknown bug doesn't allow the quotes app to work. What's the issue?	3	Apr 23, 2023
Woocommerce Product Add-ons - Auto-select first option	1	Apr 15, 2016
Adding Option to Select box	1	Apr 27, 2007

Adding new Option() to a select box doesn't work

Rob

Martin Honnen

Ray

Tim Slattery

Rob

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads