Drop down edit values of three other drop downs

JavaScript
1

I have a drop down menu with seven vehicle types.


<select id="cartypes">
<option value="1">Car 1</option>
<option value="2">Car 2</option>
<option value="3">Car 3</option>
<option value="4">Car 4</option>
<option value="5">Car 5</option>
<option value="6">Car 6</option>
<option value="7">Car 7</option>
</select>

I have three other drop down menus which contain numbers from 1-8 (passengers, suitcases and carry ons)


<select id="passengers">
<select id="suitcases">
<select id="carryons">

All three of the drop downs contain the following:


<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>

I want to amend these three drop down menus (what options they contain) based on the choice of the car type.

Ideally it would work like this, an onchange event on the cartype drop down:


If cartype = 1 THEN
passengers drop down has values 1-4
suitcases drop down has values 1-2
carryons drop down has values 1-2

ELSE

If cartype = 2 THEN
passengers drop down has values 1-4
suitcases drop down has values 1-4
carryons drop down has values 1-4

etc, i can do the other cartypes once i know how it works.

might be worth mentioning i’m using jquery.

Thanks

2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

var FillArray=[];
FillArray[1]=[4,3,2];
FillArray[2]=[4,4,4];

function Fill(){
 var ary=FillArray[document.getElementById('cartypes').value],selary=['passengers','suitcases','carryons'],sel,z0=0,z1a;
 for (;z0<selary.length;z0++){
  sel=document.getElementById(selary[z0]);
  sel.options.length=0;
  if (ary&&ary[z0]){
   for (z1a=0;z1a<ary[z0];z1a++){
    sel.options[z1a]=new Option(z1a+1,z1a+1);
   }
   sel.selectedIndex=0;
  }
 }
}
/*]]>*/
</script></head>

<body onload="Fill();">
<select id="cartypes" onchange="Fill();" >
<option value="1">Car 1</option>
<option value="2">Car 2</option>
<option value="3">Car 3</option>
<option value="4">Car 4</option>
<option value="5">Car 5</option>
<option value="6">Car 6</option>
<option value="7">Car 7</option>
</select>
<select id="passengers"></select>
<select id="suitcases"></select>
<select id="carryons"></select>
</form>

</body>

</html>
3

That is brilliant. Thank you so much. Works like a charm and very easty to customize.

Couldn’t have asked for anything more.