Sunteți pe pagina 1din 6

simple combo box desplegables con jquery | Webnivel

http://www.webnivel.net/simple-combo-desplegabl...

Skip to content
Home
Plugins jquery
Scripts php
Utilidades SEO
Utilidades web
Webnivel
Diseo programacion y posicionamiento web
Ajax
Css
General
htaccess
Mysql
Photoshop
php
Scripts
SEO
Webs de interes
6 febrero, 2009
Subscribe

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:

1 de 6

27/03/14 19:41

simple combo box desplegables con jquery | Webnivel

http://www.webnivel.net/simple-combo-desplegabl...

1. $(document).ready(function(){
2.
$("#provincia").change(function(){
3.
$("#combos").load("combos.php", {provincia:
$("#provincia").val()});
4.
});
5. });
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.
1. $("#provincia").change(function(){
2.
$("#combos").load("combos.php", {provincia:
$("#provincia").val()});
3. });
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:
01.
02.
03.

echo "<label>Provincia: <select id='provincia'


name='provincia'>"; // rellenando el combobox de las
provincias
//echo "<option>Provincia</option>";
$result1=mysql_query("SELECT DISTINCT `nombre` FROM
`provincias`", $conn) or die (mysql_error());
while ($row=mysql_fetch_array($result1)) {
$provincia= $row["nombre"] ;
echo "<option value="$provincia">$provincia</option>";
}
echo "</select></label><br /><br />";

04.
05.
06.
07.
08.
09.
10. <div align="center" id="combos"></div>

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:
01.
02. require('conexion.php');//Esto simplemente incluye tu
conexion a la BD
03.
if(@$_POST['provincia']){ // Si tiene el parametro

2 de 6

27/03/14 19:41

simple combo box desplegables con jquery | Webnivel

http://www.webnivel.net/simple-combo-desplegabl...

provincia por post le dejamos entrar

04.
05.

echo "<label><select id='ciudad' name='ciudad'>"; //


rellenando el combobox
//echo "<option>Ciudad</option>";
$result1=mysql_query("SELECT `nombre` FROM `cities`
WHERE `provincia` = '".$_POST['provincia']."'", $conn)
or die (mysql_error());
while ($row=mysql_fetch_array($result1)) {
$ciudad= $row["nombre"] ;
echo "<option value="$ciudad">$ciudad</option>";
}
echo "</select></label>";
}
else{//si no trae la variable provincia
echo "Error";
}

06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

Buen el codigo esta lo sucientemente 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.

Be Sociable, Share!

Tweet

Like

Share

Read more from Ajax, Jquery, php


combos, Jquery, php
Share your thoughts, post a comment.
Name

(required)

Email

(required)

Website

3 de 6

27/03/14 19:41

simple combo box desplegables con jquery | Webnivel

http://www.webnivel.net/simple-combo-desplegabl...

Comment

Cdigo CAPTCHA*
Note: HTML is allowed. Your email address will never be published.
Subscribe to comments

Submit Comment

Search

Categoras
Ajax
Css
General

4 de 6

27/03/14 19:41

simple combo box desplegables con jquery | Webnivel

http://www.webnivel.net/simple-combo-desplegabl...

htaccess
Jquery
Mysql
Photoshop
php
prestashop
Scripts
SEO
Webs de interes
wordpress

Etiquetas
aplicacion barra buscadores busqueda calidad clave
directorios

dominio dominios

enlaces

facebook

codigo com

comprar crear

google gratis herramienta

herramientas htaccess imagen imagenes Jquery mas online pagina


php plugin plugins

posicionamiento prefabricados prestashop programa

programas redes script

SEO sociales texto

wordpress yahoo

tienda

url web webmaster

About

Ultimas Entradas
Usar imagenes sacadas de internet bueno para SEO?
Generador codigo video html5
estructura y profundidad de url para seo
Generador total
Seovolucin o seovolucion?
copiar imagen de un servidor a otro con php
Servidores dedicados baratos
Alternativa a analytics
Complentos indispensables para refox
Autocompletar busqueda con jquery ui

Search
Search
5 de 6

27/03/14 19:41

simple combo box desplegables con jquery | Webnivel

http://www.webnivel.net/simple-combo-desplegabl...

Traction Theme by The Theme Foundry


Copyright 2014 webnivel. All rights reserved.

6 de 6

27/03/14 19:41

S-ar putea să vă placă și