simple combo box desplegables con jquery

Esto es un simple ejemplo de como se podria hacer un combo entre dos desplegables para que cuando en el primero selecionemos algo, con el valor de lo selecionado haga una consulta a la base de datos y rellene la segunda lista.
Por ejemplo, se quiere que al selecionar una provincia del primer combo box aparezca el segundo con todas las ciudades de la provincia selecionada en el primer desplegable.
Para el siguiente ejemplo necesitaremos el archivo o pagina donde se mostraran los combos y un script en php donde se ejecutara la consulta a la base de datos con la provincia selecionada en el primer combo.

Empezamos con la pagina principal donde se mostraran los combos:

codigo jquery:
[code]
$(document).ready(function(){
$(“#provincia”).change(function(){
$(“#combos”).load(“combos.php”, {provincia: $(“#provincia”).val()});
});
});
[/code]
No tiene mucho misterio, en la primera linea incluimos la libreria jquery, la segunda, tercera, septima y octaba es el codigo que se pone siempre.
[code] $(“#provincia”).change(function(){
$(“#combos”).load(“combos.php”, {provincia: $(“#provincia”).val()});
});[/code]
en estas lineas simplemente le decimos que cuando el combobox con el id “#provincia” cambie, cargue en el div con id “#combos” la pagina en php “combos.php” y le pase por parametro el valor de “#provincia” que sera la provincia que hayamos selecionado.

Ahora el codigo de los combos que ira donde queramos mostrar las listas desplegables:
[code]
echo “

“;

[/code]

En mi caso relleno el combo de provincias con una consulta a la base de datos, tambien puedes poner todas las provincias a mano pero no lo recomiendo. Para los que copien este codigo y intenten hacerlo funcionar deben tener en cuenta que la variable $conn debe tener su conexion a la base de datos, y la estructura de esta debe ser igual a la mia para que esto les funciones.

Ahora por ultimo el codigo de la pagina combos.php:
[code]
require(‘conexion.php’);//Esto simplemente incluye tu conexion a la BD
if(@$_POST[‘provincia’]){ // Si tiene el parametro provincia por post le dejamos entrar

echo ““;
}
else{//si no trae la variable provincia
echo “Error”;
}
[/code]
Buen el codigo esta lo suficientemente comentado como para no decir nada sobre el, pero hay que recordar que la seguridad en un archivo asi es nula asi que te recomendaria un poco de control sobre la variable que envias por post.

Deja un comentario