Desplegables dinámicos

Cuando se plantea la necesidad de hacer un desplegable dinámico (select en html) existen varias aproximaciones:
- Cambiar el estilo de las opciones que no se puedan seleccionar.
- Deshabilitar las opciones que no se puedan seleccionar, sin borrarlas
- Recargar por completo el desplegable incluyendo sólo las opciones válidas

Cambiar el estilo
Se puede modificar el estilo de una opción de un desplegable accediendo a sus atributos. Siendo opt el objeto option del desplegable se pueden hacer cosas como esta, desde javascript para modificar su color:
opt.style.c olor="red";

Deshabilitar la opción
Esta aproximación sólo es válida para Firefox, a pesar de que según el estándar HTML un objeto option acepta la propiedad disabled. Desde javascript:
opt.disabled="true";

Recargar el desplegable
Para eliminar las opciones de un desplegable desde javascript utilizamos este código, comboBox es el objeto select del formulario HTML.

function _removeOptions(comboBox)
{
   for(var contador = comboBox.length - 1; contador > 0; contador--) 
   {
      comboBox.remove(contador);
   }
}

Para añadir opciones.

function _insertOption(comboBox, optionText, optionValue)
{
   var elOptNew = document.createElement('option');
   elOptNew.text = optionText;
   elOptNew.value = optionValue;
   try 
   {
      comboBox.add(elOptNew, null); // Modo estándar, que no funciona en IE
   }
   catch(ex) 
   {
      comboBox.add(elOptNew); // Sólo IE
   }
}

Ahora bien, ¿cómo saber qué opciones hay que poner en el segundo desplegable una vez se ha modificado el primero? También con javascript. Creamos un array en javascript que contendrá las posibles etiquetas y valores del segundo combo, así como una correspondencia entre los índices del primer combo y los valores válidos del segundo.

var arValue1 = new Array ( 'valor1', 'valor2', 
      'valor3', 'valor4', 'valor5' );
var arValue2 = new Array ( 'valor1.1', 'valor1.2', 
      'valor2.1', 'valor3.1', 'valor3.2', 'valor3.3', 
      'valor3.4', 'valor4.1', 'valor4.2' );
var arLabel1 = new Array ( 'texto1', 'texto2',
       'texto3', 'texto4', 'texto5' );
var arLabel2 = new Array ( 'texto1.1', 'texto1.2',
       'texto2.1', 'texto3.1', 'texto3.2', 'texto3.3',
       'texto3.4', 'texto4.1', 'texto4.2' );

El array de dependencias tendrá el índice del primer select y el del segundo válido, empezando por cero.

var arDependencias = new Array ( '0.0', '0.1', '1.2', 
      '2.3', '2.3', '2.4', '3.5', '3.6', '4.7', '4.8' );

Para determinar qué opciones son válidas dado un índice seleccionado, creamos un array con valor sólo en los índices válidos:

function _getValidos(indiceSeleccionado, arValidos)
{
   for (var contador = 0; contador < arValue2.length - 1; contador++) {
      var dependencia  = arDependencias[contador].split(".");
      var indice1 = new Number(indexis[0]);
      var indice2 = new Number(indexis[1]);
      // Esto es porque la primera opción del select es vacía
      indice1 += 1;
      indice2 += 1;
      
      if( indiceSeleccionado == indice1 )
      {
         arValidos[indice2] = new String("");
      }
   }      
}

La función que modificará finalmente el combo será:

function _onchangeSelect(comboBox1, comboBox2) 
{
   var arValidos    = new Array();

   var indiceSeleccionado = comboBox1.selectedIndex;

   // Vaciado
   this._removeOptions( comboBox2 );

   this.getValidos(indiceSeleccionado, arValidos);

   // Llenado
   for(var contador = 0; contador < this.arPosibles.length+1; contador++) {
      var esValido = arValidos[contador] != null;
      if ( esValido ) 
      {
         this._insertOption(comboBox2, this.arLabel2[contador-1], 
               this.arValue2[contador-1]);
      }
   }
   comboBox2.selectedIndex = 0;
}

Para cargar el primer combo:

function _resetComboBox1(comboBox1) 
{   
   comboBox1.length = 1;
   comboBox1.options[0] = new Option(selectValueName, "", true);
   for (var contador = 0; contador < arValue1.length; contador++) 
   {
      comboBox1.options[contador+1] = new Option(arLabel1[contador], arValue1[contador]);
   }   
}

Juntando todo en un HTML como

<html>
<head>
<script>
// Todo el javascript
</script>

</head>
<body>
<form name="pruebaDesplegable" action="">
<select name="uno" id="uno" onchange="javascript:_onchangeSelect( this, 'dos');">
  <option value="">Elija</option>
</select>
<select name="dos" id="dos">
  <option value="">Elija</option>
</select>
<script>
_resetComboBox1( document.getElementById( "uno" ), "Elija");
</script>
</body>
</html>