Linking Drop Downs

<html>
<head>
<script language='javascript'>
/*
  This assumes that you can work out how to fill the first box with php.

  Then you create a series of js arrays,one index for each value of the parent box filled with
  all the possible values for the child box. The below example assumes that the option value and
  text are the same. You can use additional separators to split those elements if the value and text
  are different (1,Here;2,There;3,Somewhere Else)


*/

var box2 = new Array();
box2['x'] = ",1,2,3";
box2['y'] = ",4,5,6";
box2['z'] = ",7,8,9";

var box3 = new Array();
box3['1'] = ",q,r,s";
box3['2'] = ",t,u,v";


function loadOptions(sParentBox,sChildBox)
{
  //get the value of the selected option
  var sParentValue = document.getElementById(sParentBox).value;
alert(sParentValue);
  //load the appropriate event list to the option box
  var theSel  = document.getElementById(sChildBox);

  //clear previous options
  theSel.options.length = null;

  //handle if there is no value
  if (sParentValue == ''){alert("exiting"); return;}

  if (sParentBox == "box1") {
    oTargetArray = box2;
  }else if(sParentBox == "box2"){
    oTargetArray = box3;
  }

  //split the array values by the separator
  var arrList     = oTargetArray[sParentValue].split(",");

  //loop thru the array of options to add them to the dropdown
  for (x=0; x < arrList.length; x  )
  {
    var newOpt     = new Option(arrList[x],arrList[x]);//(theText,theValue);
    var selLength  = theSel.length;
    theSel.options[selLength] = newOpt;
  }//next
}//end func

</script>
</head>
<body>
<form>
<table>
  <tr>
    <td>Box 1</td>
    <td>
      <select name="box1" id="box1" onchange="loadOptions(this.name,'box2');">
          <option value=''></option>
          <option value='x'>x</option>
          <option value='y'>y</option>
          <option value='z'>z</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Box 2</td>
    <td>
      <select name="box2" id="box2" onchange="loadOptions(this.name,'box3');">
      </select>
    </td>
  </tr>
  <tr>
    <td>Box 1</td>
    <td>
      <select name="box3" id="box3">
      </select>
    </td>
  </tr>

</form>
</body>
</html>