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

joseph.lindley

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

Dec 21 '05 #1

Follow Post Reply

19465

web.dev

jo************@gmail.com wrote:

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_op tions[count]));
selObj.appendChild(myOption);
}

Dec 21 '05 #2

joseph.lindley

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

Dec 21 '05 #3

Howard Jess

jo************@gmail.com wrote:

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,
jo************@gmail.com wrote:
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

Dec 21 '05 #4

mouseit101

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

Dec 21 '05 #5

joseph.lindley

Bah! Humbug.

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

Thanks for the help!

(may the force be with you)

Dec 21 '05 #6

Luke Matuszewski

jo************@gmail.com wrote:

[...] 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[i] = new Option(arr[i]);
}
}
</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/

Dec 21 '05 #7

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

This discussion thread is closed

Similar topics