Have one drop down list change another.

[rkoya]

Hi,

I want to another 2nd drop down menu when first one is selected.

Basically I have the following, and want to change the value of second drop down when USA is selected in the first:

<FORM NAME="form1">
<SELECT NAME="select1" onLoad="myOnChange();" SIZE="1" >
<OPTION VALUE="none"></OPTION>
<OPTION VALUE="UK">UK</OPTION>
<OPTION VALUE="USA">USA</OPTION>
<OPTION VALUE="GERMANY">Germany</OPTION>
</SELECT>
<SELECT NAME="select2" SIZE="1" >
<OPTION VALUE="none"></OPTION>
<OPTION VALUE="EN">English</OPTION>
<OPTION VALUE="UEN">American English</OPTION>
<OPTION VALUE="GERMAN">German</OPTION>
</SELECT>

So when USA is selected I want the second one to say American English straight away. If UK is selected then English is selected etc...

I have tried using the following but have not had much success:

<script>
function myOnChange() {
if (document.form1.select1.selectedIndex.value='USA'){
this.form1.select2.value = 'UEN'
}
}
</script>

Can anyone help??
</LABEL>
</FORM>

 

[Diancecht]

Try the onChange event instead of onLoad

Cheers,
Dian

 

[rkoya]

Sorry, forgot about that, I had an body onload event and forgot to change it to onchange when moved it out of body.

I have done that but when I select UK it still changes it to American English. Infact, when UK is selected I do not want it changing 2nd one at all. Only change 2nd one if USA is selected. Is there something I am missing in the JScript.

Thanks

 

[Diancecht]

Try alerting

document.form1.select1.selectedIndex.value

or try

document.form1.select1.options[document.form1.select1.selectedIndex].value

Cheers,
Dian

 

[tsuji]

[tt]
function myOnChange() {
switch (document.form1.select1.value) {
case "UK":
document.form1.select2.value="EN"; break;
case "USA":
document.form1.select2.value="UEN"; break;
default:
break; //do nothing
}
}
[/tt]

 

[rkoya]

Thanks once again tsuji, that worked perfectly

 

[friendlyposter]

You have the answer. And it's a good one !


For the record, the issue with the original code was:

if (document.form1.select1.selectedIndex.value='USA'){


Requires dual equal signs for condition.

 

[cLFlaVA]

For the record, the issue with the original code was...

not completely. single equals signs are assignment operators, and, within an if statement, should always return true. therefore, the code within the "true" part of the if statement would always fire. the main issue with the OP's code seemed to be the erroneous selectedIndex reference (erroneous on both counts).

the code prob should have looked like:

function myOnChange() {
    var f = document.forms['form1'];
    var e = f.elements;
    if (e['select1'].options[e['select1'].selectedIndex].value == 'USA'){
        e['select2'].value = 'UEN'
    }
}

*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[j4606]

http://www.tek-tips.com/faqs.cfm?fid=6294

faqs ftw

I don't know the answer but my good friend Google does.