multiple dropdown menus

[sarah]

I have 3 drop down menus on my webpage, I want to be able to select an item from one dropdown menu and depending on the selection, the other two drop down menus are updated. For example:

These are my 3 menus:

Menu1 = Country
Menu2 = Contact
Menu3 = City

Now when I select a 'country' I want to update the 'contact' menu and the 'city' menu. I have already seen a working example from http://javascriptkit.com/script/cut183.shtml, but this only allows me to update the 'contact' menu when the selection changes in the 'country' menu. Is it possible to update two dropdown menu's when an option is selected in the first menu? Below is the syntax I am using for the form:

<form name="Country">

<select name="country" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Scotland</option>
<option>Wales</option>
<option selected>England</option>
<option>Ireland</option>
</select>

<select name="contact" size="1">
<option selected value="uk-contact.htm">Chris</option>
<option value="scot-contact.htm">Tony</option>
<option value="wales-contact.htm">Maxine</option>
<option value="ire-contact.htm">John</option>
</select>

<select name="city" size="1" onChange="MM_jumpMenu('parent',this,0);" class="dropdownmenu">
<option selected value="leeds.htm">Leeds</option>
<option value="brad.htm">Bradford</option>
<option value="manc.htm">Manchester</option>
<option value="shef.htm">Sheffield</option>
<option value="nott.htm">Nottingham</option>
<option value="birm.htm">Birmingham</option>
<option value="lond.htm">London</option>
</select>

<input type="button" name="test" value="Go!"
onClick="go()">

<script>
var groups=document.Country.country.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Scotland >>","")
group[0][1]=new Option("Glasgow","glas.htm")
group[0][2]=new Option("Edinburgh","edin.htm")
group[0][3]=new Option("Inverness","inve.htm")

group[1][0]=new Option("Wales >>","")
group[1][1]=new Option("Cardiff","card.htm")
group[1][2]=new Option("Welshpool","wels.htm")

group[2][0]=new Option("England >>","")
group[2][1]=new Option("Bradford","brad.htm")
group[2][2]=new Option("Manchester","manc.htm")
group[2][3]=new Option("Sheffield","shef.htm")
group[2][4]=new Option("Nottingham","nott.htm")
group[2][5]=new Option("Birmingham","birm.htm")
group[2][6]=new Option("London","lond.htm")

group[3][0]=new Option("Ireland >>","")
group[3][1]=new Option("Belfast","belf.htm")
group[3][2]=new Option("Dublin","dubl.htm")

var temp=document.Country.contact

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
</script>
</form>

Any ideas?
Thanx
Luv Sarah

[ShriekForth]

You have most of what you need already there, you just need to do it twice. You can make that static, (set the redirect() function to two arrays), or make it a more generic function.

First I created a new array called contacts with the same way you did groups array.
var contacts=new Array(groups)
for (i=0; i<groups; i++)
contacts[i]=new Array()

Next you need to add contacts to this contacts array in the same manner you did for groups ...
group[0][0]=new Option("Scotland >>","")
group[0][1]=new Option("Glasgow","glas.htm")
group[0][2]=new Option("Edinburgh","edin.htm")
group[0][3]=new Option("Inverness","inve.htm")
contacts[0][0] = new Option("Tony","tony.html");
contacts[0][1] = new Option("Chris","chris.html");
contacts[0][2] = new Option("Joe","joe.html");
For all of the countries.

Then the function changes, like this...

var temp=document.Country.contact
var temp2 = document.Country.city

function redirect(x){
setOptions(temp2, x,"group");
setOptions(temp, x,"contacts");
}

function setOptions(temp, x, grp){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
eval (" len = " + grp + "[x].length")
for (i=0;i<len ;i++){
eval("temp.options[i]=new Option(" + grp +"[x][i].text," + grp +"[x][i].value)")
}
temp.options[0].selected=true
}

setOptions takes the name of the select object in the form, the first index in the array, and the array name. So reset() calls setOptions twice, once asking for documen.Country.contact and once for city. The names are alittle messed up as it looks like it came form the example on javascript kit, but it still works.

ShriekForth

[requestcode]

Hi Sarah,
Here is a link to a triple combo box script fromt the Free Scripts section that should help:
http://www.wsabstract.com/script/script2/triplecombo.shtml

[sarah]

Hi Shriek

Thanx for the quick reply, I tried it out but I keep getting the following error:

'temp1 is undefined'

[sarah]

Its ok Shriek

Just a typo error temp1 should have been temp!
:thumbsup:

Thanx Honey
It works perfectly
;)

[ShriekForth]

Yeah, that is what I get for changing things as I post them. :) I had temp and temp2 backwards when filling name vs city. Glad you got it sorted out.

ShriekForth