Este es el primero de dos posts dedicados a como gestionar la carga de combos dependientes sin necesidad de recargar la página. En este primero mediante un script en el que mediante una array bidemensional vamos almacenando los distintos valores y al evento onchange del primer combo, recargamos el segundo.

Ver ejemplo en funcionamiento » »

Javascript:

<script language="javascript">
function Combos(x) {
  ItDepend=document.getElementById('CombDependiente');
  if(!ItDepend){return;}                 
  var mitems=new Array();
  mitems['Elige']=[''];
  mitems['Informatica']=['Elegir opción','Portatiles','Impresoras','Consumibles','Accesorios'];
  mitems['Sonido']=['Elegir opción','Filet Mignon','Porterhouse','Flank','T-Bone'];
  mitems['Imagen']=['Elegir opción','DVD','Cámaras','Home Cinema',];
  mitems['Fotografia']=['Select Item','Cámaras','Memorias','Accesorios'];
  ItDepend.options.length=0;
  ItActual=mitems[x.options[x.selectedIndex].value];
  if(!ItActual){return;}
  ItDepend.options.length=ItActual.length;
  for(var i=0;i<ItActual.length;i++) {
    ItDepend.options[i].text=ItActual[i];
    ItDepend.options[i].value=ItActual[i];
  }
}
</script>

HTML:

<form action="">
<label for="or">Área:</label>
<select name="or" id="or" onchange="Combos(this)">
  <option value="Elige">Elige</option>
  <option value="Informatica">Informática</option>
  <option value="Sonido">Sonido</option>
  <option value="Imagen">Imagen</option>
  <option value="Fotografia">Fotografía</option>
</select>
<label for="CombDependiente">Productos:</label>
<select name="CombDependiente" id="CombDependiente"></select>
<input type="submit" value="Ir" />
</form>