Dynamically adding <option> tags to <select> boxes in Firefox / IE

joseph.lindley · Dec 21, 2005

Forgive me for I am a bit of a web-dev novice - but I'm not doing too
bad.

I'm currently working with a bit of javascript to dynamically add
<option>s into a select box. My code currently works fine in Internet
Explorer, however in Firefox the dropdown only displays the first
option in the list, and when clicked the other values aren't displayed.

Here is the code;

//ar_options is an array with the option to be displayed in.

for (count=0; count<number_of_options+1; count++)
{
document.forms['enquiry'].enquirytype.options[count] = new
Option(ar_options[count],ar_options[count]);
};

As I said - fine in Internet Explorer, but not in Firefox. I did
discover some discussions about this, which were talking about an issue
and workarounds but I couldn't get any of them to work. I have also
tried simply using the document.write() function to output the HTML in
the correct place. However this is just hte same, works in IE but not
Firefox.

Any help would be greatly appreciated.

Cheers,
Joe

web.dev · Dec 21, 2005

for (count=0; count<number_of_options+1; count++)
{
document.forms['enquiry'].enquirytype.options[count] = new
Option(ar_options[count],ar_options[count]);
};

I'm assuming you have a form with a name of 'enquiry' and 'enquirytype'
is your select element. In that case, to truly do it dynamically you
can do something like the following example:

var selObj = document.forms["enquiry"].elements["enquirytype"];
var option = document.createElement("option");

for(var count = 0; count < num_of_opt; ++count)
{
var myOption = option.cloneNode(false);
myOption.value = ar_options[count];
myOption.appendChild(document.createTextNode(ar_options[count]));
selObj.appendChild(myOption);
}

joseph.lindley · Dec 21, 2005

Correct assumptions.

Thanks..... but still no cigar!

Again - it seems work in IE but not FF.

Any ideas? Something with my version or installation of firefox maybe?
Its 1.0.3.

Thanks.
J

Howard Jess · Dec 21, 2005

for (count=0; count<number_of_options+1; count++)
{
document.forms['enquiry'].enquirytype.options[count] = new
Option(ar_options[count],ar_options[count]);
};

and in response to a suggested alternate method,

Correct assumptions.

Thanks..... but still no cigar!

Again - it seems work in IE but not FF.

Any ideas? Something with my version or installation of firefox maybe?
Its 1.0.3.

I say, use the force, Joseph! Does Firefox's Javascript Console indicate
any problems? If so (or if not), use the Document Inspector. Are the options
truly there?

hj

mouseit101 · Dec 21, 2005

you can access the objects of an option box through DOM.

good page on it at http://www.w3schools.com/htmldom/dom_obj_option.asp

joseph.lindley · Dec 21, 2005

Bah! Humbug.

Well I downloaded the latest ver of Firefox and it works now....

Thanks for the help!

(may the force be with you)

Luke Matuszewski · Dec 21, 2005

[...] As I said - fine in Internet Explorer, but not in Firefox.

I have written this snippet of hand (look below):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = ["5", "4", "3", "2", "1"];
function change() {

var optsRef = document.forms['f01'].elements['s01'].options;
for(var i=0; i<arr.length; ++i) {
optsRef = new Option(arr);
}
}
</script>
<form name="f01">
<fieldset>
<legend></legend>
<select name="s01">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="checkbox" onclick="change();">
</fieldset>
</form>
</body>
</html>

, and it perfectly works in FF, IE, Opera, Konqueror...
Maybe it will help.

Luke.
http://www.mattkruse.com/javascript/bestpractices/

How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
Multi select options in a menu	1	Oct 30, 2022
Select, Option, innerHTML,Internet Explorer, Firefox, bug	10	Sep 12, 2009
Adding option elements to select on focus	1	Mar 14, 2008
Adding OPTION tags dynamically	8	Jul 15, 2005
onclick event does not work with select option in IE	7	Jan 18, 2007
Adding Option to Select box	1	Apr 27, 2007
Manipulate select, optgroup, option boxes	3	Jul 15, 2005

Dynamically adding <option> tags to <select> boxes in Firefox / IE

joseph.lindley

web.dev

joseph.lindley

Howard Jess

mouseit101

joseph.lindley

Luke Matuszewski

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads