be*******@gmail.com wrote:
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").o ptions[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").a dd(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>
--
Rob