Combobox anidado

[tunait]

Bueno, este ha sido (al fin) mi primer encuentro con el tema este de las listas dependientes.


Hice un ejemplo sencillo de dos opciones por opción. Creo que está bastante intuitivo y se necesitan pocas explicaciones.

Código:

<script language="javascript" type="text/javascript">
//Listas dependientes por tunait!
//http://javascript.tunait.com/
function slctr(texto,valor){
this.texto = texto
this.valor = valor
}
var herramientas=new Array()
herramientas[0] = new slctr('- -Herramientas- -')
herramientas[1] = new slctr("Jardín",'jardin')
herramientas[2] = new slctr("fontanería",'fontaneria')


var muebles=new Array()
muebles[0] = new slctr('- -Muebles- -')
muebles[1] = new slctr("Salón",'salon')
muebles[2] = new slctr("dormitorio",'dormitorio')

//*******Nietos*******************
var jardin = new Array()
jardin[0] = new slctr('- -Jardín- -')
jardin[1] = new slctr("podadora",null)
jardin[2] = new slctr("segadora" ,null)

var fontaneria = new Array()
fontaneria[0] = new slctr('- -Fontanería- -')
fontaneria[1] = new slctr("llave inglesa",null)
fontaneria[2] = new slctr("llave fija",null)


var salon = new Array()
salon[0] = new slctr('- -Salón- -')
salon[1] = new slctr("Mesa",null)
salon[2] = new slctr("silla" ,null)

var dormitorio = new Array()
dormitorio[0] = new slctr('- -Dormitorio- -')
dormitorio[1] = new slctr("cama",null)
dormitorio[2] = new slctr("mesita" ,null)


function slctryole(cual,donde){
if(cual.selectedIndex != 0){
	donde.length=0
	cual = eval(cual.value)
	for(m=0;m<cual.length;m++){
		var nuevaOpcion = new Option(cual[m].texto);
		donde.options[m] = nuevaOpcion;
		if(cual[m].valor != null){
			donde.options[m].value = cual[m].valor
			}
		else{
			donde.options[m].value = cual[m].texto
			}
		}
	}
}
</script>

<form name="form1" method="post" action="">
<select name="select" onchange="slctryole(this,this.form.select2)">
<option>- - Seleccionar - -</option>
<option value="herramientas">herramientas</option>
<option value="muebles">muebles</option>
</select>
<select name="select2" onchange="slctryole(this,this.form.select3)">
<option>- - - - - -</option>
</select>
<select name="select3">
<option>- - - - - -</option>
</select>
</form>

en el onchange de cada selector le pasas los siguientes parámetros:


onchange="slctryole(this,this.form.nombreDelSelectACambiar)"


Dime si te sirvió (lo he probado en explorer 5.0, mozilla 5.0 y NS 7.0)