Firefox and select lists

[beenamore]

Hi,

I have two select lists and depending on the value selected in the
first select dropdown, I want to populate the second list.

I tired a couple of different ways, but for some reason, it works fine
on IE but not on Firefox. On Firefox the second dropdown list doesnt
get populated.

Any pointers on how to populate the second dropdown..

Heres the code:-

for(var j=0;j<array.length;j++)
{
this.document.getElementById("secondSelectName").options[j] = new
Option("txt", "val");
}

for(var j=0;j<array.length;j++)
{
var oOption = document.createElement("OPTION");
secondSelectlist.options.add(oOption);
oOption.innerText = "txt";
oOption.value = "value";
}

for(var j=0;j<array.length;j++)
{
this.document.getElementById("secondSelectName").add(new Option("txt",
"val"));
}

Thanks for the inputs,
Beena

 

[Randy Webb]

(e-mail address removed) said the following on 2/6/2006 1:32 PM:

Hi,

I have two select lists and depending on the value selected in the
first select dropdown, I want to populate the second list.

Ummm, ok.

I tired a couple of different ways, but for some reason, it works fine
on IE but not on Firefox. On Firefox the second dropdown list doesnt
get populated.

Really? Considering you have some really, ummm, weird code that doesn't
surprise me.

Any pointers on how to populate the second dropdown..

Heres the code:-

And where is that code at? And where is the HTML that goes with it?

for(var j=0;j<array.length;j++)
{
this.document.getElementById("secondSelectName").options[j] = new
Option("txt", "val");
}

Using gEBI to access form elements? First guess, your form elements have
NAME attributes and not ID attributes.

for(var j=0;j<array.length;j++)
{
var oOption = document.createElement("OPTION");
secondSelectlist.options.add(oOption);
oOption.innerText = "txt";

..innerText is IE only.

oOption.value = "value";
}

for(var j=0;j<array.length;j++)
{
this.document.getElementById("secondSelectName").add(new Option("txt",
"val"));
}

Thanks for the inputs,

Post a URL to a sample page that has your *complete* code in it. The
above is next to useless to try to figure out why it doesn't "work".

 

[Gérard Talbot]

Hi,

I have two select lists and depending on the value selected in the
first select dropdown, I want to populate the second list.

I tired a couple of different ways, but for some reason, it works fine
on IE but not on Firefox. On Firefox the second dropdown list doesnt
get populated.

Any pointers on how to populate the second dropdown..

Heres the code:-

for(var j=0;j<array.length;j++)
{
this.document.getElementById("secondSelectName").options[j] = new
Option("txt", "val");
}

for(var j=0;j<array.length;j++)
{
var oOption = document.createElement("OPTION");
secondSelectlist.options.add(oOption);

HTML select have an add method but not options.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14493106

Also, the W3C DOM 2 HTML add method takes 2 parameters, not 1.

MSIE 6 does not support
objSelect.add(objOption, null)

Proven workaround:
objSelect.appendChild(objOption);

oOption.innerText = "txt";

oOption.appendChild(document.createTextNode("txt"));

As mentioned by Randy, innerText is a proprietary property.

oOption.value = "value";
}

for(var j=0;j<array.length;j++)
{
this.document.getElementById("secondSelectName").add(new Option("txt",
"val"));

I'm not sure you can do the above statement. Can you post an url?

Gérard

 

[RobG]

Hi,

I have two select lists and depending on the value selected in the
first select dropdown, I want to populate the second list.

I tired a couple of different ways, but for some reason, it works fine
on IE but not on Firefox. On Firefox the second dropdown list doesnt
get populated.

Any pointers on how to populate the second dropdown..

Heres the code:-

for(var j=0;j<array.length;j++)
{
this.document.getElementById("secondSelectName").options[j] = new
Option("txt", "val");
}

for(var j=0;j<array.length;j++)
{
var oOption = document.createElement("OPTION");
secondSelectlist.options.add(oOption);
oOption.innerText = "txt";
oOption.value = "value";
}

for(var j=0;j<array.length;j++)
{
this.document.getElementById("secondSelectName").add(new Option("txt",
"val"));
}

IE has trouble adding otpions using createElement. The best way (i.e.
supported in most browsers) to add options to a select element is with
new Option (wrapped for posting):

selRef(selRef.options.length) =
new Option([text, [value, [defaultSelected, [selected]]]])


Where all parameters are optional and:

text is the option text
value is the default value
selected is a boolean (true/false) to make the option selected
defaultSelectedis a boolean to make the option the default selected

new Option() is DOM 0, so widely supported and likely never to be dropped.

e.g.


<script type="text/javascript">
function addOptions(sel)
{
// Remove existing options
sel.options.length = 0;

// Add 5 options, make opt index 2 default selected and 4 selected
for (var i=0; i<5; ++i){
sel[sel.options.length] =
new Option('Option ' + i, 'opt' + i, (i==2), (i==4) );
}
}
</script>

<form action="">
<select name="selA">
<option selected></option>
</select>
<input type="button" value="Add options"
onclick="addOptions(this.form.selA);">
<input type="reset">
</form>