funcion para mostrar select de varios niveles

[pedromir]

Hola a todos

Tengo el siguiente problema, tengo dos select que dependen el uno del otro y los datos salen de los correspondientes arrays y tengo una función para ello, pero el problema es que tal como tengo la función, sólo es válida para dos select y yo necesito que sea válida para un tercero o un cuarto

Código Javascript:

var datos = new Array();
datos = [['- Elije una opción -'],
['deportes'],
['musica'],
['cine']];
 
function cambiarDesple(){   
  var despleCat = document.getElementById("despleCat");  
  for (var i = 0; i < datos.length; i++) {     
    despleCat.options[i] = new Option (datos[i][0]);    
    despleCat.options.value = datos;
    despleCat.options.text = datos;
   }
}
 
subCat1 = new Array();
subCat1[0] = new Array();
subCat1[1] = new Array('Balonmano','Baloncesto','Fútbol');
subCat1[2] = new Array('Mendelson','Vivaldi','Mozart');
subCat1[3] = new Array('Antonio Banderas','Benizio del Toro');
 

Lo que necesito es que el select1 y el select2 vayan variando en función del formulario sobre el que haya hecho la selección, si pincho sobre una opción del primer select, sería select1 y select2 como está ahora, pero si pincho en una opción del select2 las variables tendrían que cambiar a select2 y select3

Código Javascript:

function cambiar(formulario){
  var i = 0;
  var select1 = formulario['D1'];
  var select2 = formulario['D2'];
  var vector = subCat1[select1.selectedIndex];
  if(vector.length)select2.length=vector.length;
  while(vector[i]){
    select2.options[i].value = vector[i];
    select2.options[i].text = vector[i];
    i++;
  }
}
 

Código HTML:

<table align="left">
    <tr>
      <td width="150">
<form method="POST">
  <select id="despleCat" name="D1" onchange="cambiar(this.form)">>
  <option></option>
  </select>
  </td>
  <td>
  <select id="D2" name="select2">
  <option>--------------------</option>
  </select>
</form>
      </td>
    </tr>
  </table>