By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,904 Members | 925 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,904 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
6 Replies


P: n/a

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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a

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.