469,890 Members | 1,574 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,890 developers. It's quick & easy.

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

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
6 19387

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
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
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
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
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

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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Ang Talunin | last post: by
2 posts views Thread by LC's No-Spam Newsreading account | last post: by
2 posts views Thread by Craig Keightley | last post: by
3 posts views Thread by Iain Hallam | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.