Combobox dinámico
Hola de nuevo!
Bien ahora tengo otra duda, como puedo hacer un combobox dinámico, es decir...
Tengo 2 combobox con datos que extraigo de una tabla en una bd, pues bien yo quiero que cuando modifique uno de ellos el 2o. Combo modifique sus datos dependiendo de la opción que allá elegido en el 1o.
¿Puedo hacerlo llamando una función? ¿Y si es así como paso el valor del combo a esa función?
Gracias de antemano!
Saludos!
Bien ahora tengo otra duda, como puedo hacer un combobox dinámico, es decir...
Tengo 2 combobox con datos que extraigo de una tabla en una bd, pues bien yo quiero que cuando modifique uno de ellos el 2o. Combo modifique sus datos dependiendo de la opción que allá elegido en el 1o.
¿Puedo hacerlo llamando una función? ¿Y si es así como paso el valor del combo a esa función?
Gracias de antemano!
Saludos!
1 Respuesta
Respuesta de Alfredo Villa
1
La mejor manera de hacerlo es utilizando Javascript con los datos de tu base de datos, ya que los cambios suceden el el cliente, y es mucho más rapido, te envío un ejemplo:
Lo primero que tendrás que hacer es cambiar el contenido de la primera lista de selección para reflejar las "categorías principales" que quieras usar, luego puedes modificar los grupos y añadirles categorías con sus respectivas subcategorías, como veras es muy fácil de implementar y modificar.
Debes de cambiar las opciones de los combos por un ciclo que llame las opciones de tu base de datos.
<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Páginas Personales</option>
<option>Profesionales</option>
<option>News</option>
</select>
<select name="stage2" size="1">
//Aca va el primer ciclo de tu base de datos
<option value="http://www.arrakis.es/~jmra">Andalucía</option>
<option value="http://andaluz.pvirt.com">El Portal</option>
<option value="http://teleline.terra.es/personal/ignaciorb">Cracks</option>
</select>
<input type="button" name="test" value="Ir!"
onClick="go()">
</p></center>
<script>
<!--
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
//aca pintas la respuesta de tu base de datos o tu array
group=new Array()
//aca va el segundo ciclo de tu array
group[0][0]=new Option("Andalucía","http://www.arrakis.es/~jmra")
group[0][1]=new Option("El Portal","http://andaluz.pvirt.com")
group[0][2]=new Option("Cracks","http://teleline.terra.es/personal/jralcala")
group[1][0]=new Option("DecoOfi","http://www.arrakis.es/~decoofi")
group[1][1]=new Option("EBTV","http://www.arrakis.es/~ebtv")
group[2][0]=new Option("De todo un poco","http://teleline.terra.es/personal/jralcala/web")
group[2][1]=new Option("JavaScript","http://teleline.terra.es/personal/ignaciorb")
group[2][2]=new Option("Nos vemos las caras","http://teleline.terra.es/personal/silvitarb")
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></p><br><p><br>
Cualquier cosa me pides aclaración
Bye
Almonato
Lo primero que tendrás que hacer es cambiar el contenido de la primera lista de selección para reflejar las "categorías principales" que quieras usar, luego puedes modificar los grupos y añadirles categorías con sus respectivas subcategorías, como veras es muy fácil de implementar y modificar.
Debes de cambiar las opciones de los combos por un ciclo que llame las opciones de tu base de datos.
<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Páginas Personales</option>
<option>Profesionales</option>
<option>News</option>
</select>
<select name="stage2" size="1">
//Aca va el primer ciclo de tu base de datos
<option value="http://www.arrakis.es/~jmra">Andalucía</option>
<option value="http://andaluz.pvirt.com">El Portal</option>
<option value="http://teleline.terra.es/personal/ignaciorb">Cracks</option>
</select>
<input type="button" name="test" value="Ir!"
onClick="go()">
</p></center>
<script>
<!--
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
//aca pintas la respuesta de tu base de datos o tu array
group=new Array()
//aca va el segundo ciclo de tu array
group[0][0]=new Option("Andalucía","http://www.arrakis.es/~jmra")
group[0][1]=new Option("El Portal","http://andaluz.pvirt.com")
group[0][2]=new Option("Cracks","http://teleline.terra.es/personal/jralcala")
group[1][0]=new Option("DecoOfi","http://www.arrakis.es/~decoofi")
group[1][1]=new Option("EBTV","http://www.arrakis.es/~ebtv")
group[2][0]=new Option("De todo un poco","http://teleline.terra.es/personal/jralcala/web")
group[2][1]=new Option("JavaScript","http://teleline.terra.es/personal/ignaciorb")
group[2][2]=new Option("Nos vemos las caras","http://teleline.terra.es/personal/silvitarb")
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></p><br><p><br>
Cualquier cosa me pides aclaración
Bye
Almonato
Muchas gracias por tu respuesta. Me sirvió mucho, ya había visto ese código buscando en la web, pero no lo había entendido muy bien que digamos, y pues entendí mejor ahora. Gracias por tu paciencia.
Saludos!
Saludos!
