Hola,
aquí te pongo un ejemplo muy básico para que vayas viendo cómo funcionaría el tema. Como ya te digo, se trata de un ejemplo básico, al que luego le puedes añadir librerías y opciones para que sea algo mas profesional.
Lo primero, hay que meter entre las tags HEAD de tu página el siguiente código:
Código:
<script type="text/javascript" language="javascript">
//Array de datos para los valores del segundo combo, cuando se haya seleccionado la primera opción en el primer combo
var datos1 = new Array();
datos1[0] = new Array('1','Combo 1 - Elemento 1');
datos1[1] = new Array('2','Combo 1 - Elemento 2');
//Array de datos para los valores del segundo combo, cuando se haya seleccionado la segunda opción en el primer combo
var datos2 = new Array();
datos2[0] = new Array('1','Combo 2 - Elemento 1');
datos2[1] = new Array('2','Combo 2 - Elemento 2');
//Función que se dispara con el evento onchange del primer combo y que es la encargada de cargar el segundo combo
function cargaCombo2(cmb1) {
var value = cmb1.options[cmb1.selectedIndex].value;
if (value == '1') {
rellenarCombo2(datos1);
} else if (value == '2') {
rellenarCombo2(datos2);
} else rellenarCombo2();
return true;
}
//Función utilizada por la anterior y que sirve para eliminar el contenido del segundo combo y rellenarlo con el array de datos que se le pase
function rellenarCombo2(datos) {
var combo = document.getElementById('combo2');
for (var i = combo.options.length;i>=0;i--)
combo.options[i] = null;
if (datos==null || datos.length==0) return true;
combo.options[0] = new Option('', '');
for (var i=0;i<datos.length;i++) {
combo.options[combo.options.length] = new Option(datos[i][1], datos[i][0]);
}
}
//Función que se dispara con el evento onchange del segundo combo y que se encarga de redirigir a la url correspondiente en función de los valores seleccionados en ambos combos
function enviar(cmb2) {
var valorCombo1 = document.getElementById('combo1').options[document.getElementById('combo1').selectedIndex].value;
var valorCombo2 = cmb2.options[cmb2.selectedIndex].value;
if (valorCombo1=='1') {
if (valorCombo2=='1') {
document.location.href = "http://www.iriazabal.com";
} else if (valorCombo2=='2') {
document.location.href = "http://www.iriazabal.com/id-creditssystem-documentation.htm";
}
} else if (valorCombo1 == '2') {
if (valorCombo2=='1') {
document.location.href = "http://www.iriazabal.com/id-languageflags-documentation.htm";
} else if (valorCombo2=='2') {
document.location.href = "http://www.iriazabal.com/id-homeslide-documentation.htm";
}
}
}
</script>
A continuación, tienes que meter los dos combos en tu html, dentro de la parte del BODY:
Código HTML:
<select name="combo1" id="combo1" onchange="return cargaCombo2(this);">
<option value=""></option>
<option value="1">Primera opción</option>
<option value="2">Otra opción</option>
</select>
<select name="combo2" id="combo2" onchange="return enviar(this);">
</select> Si insertas este código en tu página, comprobarás que las cuatro opciones posibles te redirigen a cuatro páginas diferentes.
Espero que te sirva de ejemplo, aunque, como ya he dicho, esto es solo un ejemplo.
Salu2