Listbox dependientes
Hola que tal,
Estoy haciendo un mantenedor de productos, en cual tengo incorporado varios listbox, que se supone que deberían ir cambiando según las opciones que se vayan eligiendo. Mi pregunta es, como puedo hacer que según la opción que yo en un listbox vaya cambiando las opciones en los otros listbox, todo en la misma página. Por ejemplo en el primer listbox me aparece Computador, Impresora, etc, del cual por ejemplo yo elijo Impresora y en el segundo listbox me debería aparecer los tipos de Impresoras ya sea, Láser, inyección de tinta, etc. Te cuento que me ha costado mucho hacer esto, y la verdad es que ya no tengo a quién recurrir, Por favor si tienes alguna solución ayudame, si no entiendes lo que te quiero decir respóndeme ! Por favor¡, te lo agradecería muchísimo.
Estoy haciendo un mantenedor de productos, en cual tengo incorporado varios listbox, que se supone que deberían ir cambiando según las opciones que se vayan eligiendo. Mi pregunta es, como puedo hacer que según la opción que yo en un listbox vaya cambiando las opciones en los otros listbox, todo en la misma página. Por ejemplo en el primer listbox me aparece Computador, Impresora, etc, del cual por ejemplo yo elijo Impresora y en el segundo listbox me debería aparecer los tipos de Impresoras ya sea, Láser, inyección de tinta, etc. Te cuento que me ha costado mucho hacer esto, y la verdad es que ya no tengo a quién recurrir, Por favor si tienes alguna solución ayudame, si no entiendes lo que te quiero decir respóndeme ! Por favor¡, te lo agradecería muchísimo.
1 Respuesta
Respuesta de webstudio
1
TE comento que lo que quieres hacer es necesario hacerlo con Javascript, no tienes otra forma. El siguiente, es el código que hace el trabajo, a ti solo te queda configurarlo y cambiarle lo que necesites.. para hacerlo funcionar con TU base de datos y con la salida de información que necesites..
Saludos.
.-.-.-.-.-.-.-.-.-.-.-.-.
<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="http://wsabstract.com">Website Abstraction</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
<script>
<!--
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group=new Array()
group[0][0]=new Option("Website Abstraction","http://wsabstract.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")
group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")
group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")
var temp=document.doublecombo.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options=new Option(group[x].text,group[x].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
</form>
Saludos.
.-.-.-.-.-.-.-.-.-.-.-.-.
<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="http://wsabstract.com">Website Abstraction</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
<script>
<!--
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group=new Array()
group[0][0]=new Option("Website Abstraction","http://wsabstract.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")
group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")
group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")
var temp=document.doublecombo.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options=new Option(group[x].text,group[x].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
</form>
