Select combinados mediante JQuery +

Ajax + PHP + MySql

Escrito por: denker el !"dic"#$$
jQuery% MySQ&% PHP
Hola, despus de mucho tiempo de no postear nada en el blog, les traigo un pequeo
tutorial sobre como crear unos select combinados utilizando Ajax con JQuery, php y
Myql, espero que les sea de utilidad! "omenzamos!
#n este ejercicio $amos a crear dos selects, el primero $a a cargar una lista de marcas de
celulares y el segundo select $a a cargar la lista de modelos dependiendo de la marca
seleccionada! %os datos de marcas y modelos los $amos a obtener de una base de datos en
Myql!
&amos a utilizar ' archi$os el primero se llamara( index!php y el segundo procesa!php
Arc'i(o: index)p'p
#n este archi$o se $a a cargar el primer select con las marcas de celulares!
codi*o p'p
Mediante este codigo se carga el primer select con las marcas de celulares!
<?php
$conexion = new mysqli("servidor","usuario","password","base",3306!
$s"r#onsul"a = "selec" id, marca $rom marca"!
$resul" = $conexion%&query($s"r#onsul"a!
$opciones = '<op"ion value="0"& (li)e una marca<*op"ion&'!
while( $$ila = $resul"%&$e"ch+array(
,
$opciones-='<op"ion value="'-$$ila."id"/-'"&'-
$$ila."marca"/-'<*op"ion&'!
0
?&
Script de Jquery
#n este script se hace la petici)n al ser$idor mediante ajax, esta peticion se ejecuta cuando
ocurre el e$ento change del select ,el archi$o php que $a a procesar esta peticion es
*procesa!php+, el dato que se en$ia al ser$idor es el id de la marca seleccionada! y se
en$ian mediante ,-.! i todo se ejecuta correctamente el ser$idor regresa una cadena con
los modelos los cuales se agregaran al select modelo!
<scrip" "ype=""ex"*1avascrip""&
$(documen"-ready($unc"ion(,
$("2marca"-chan)e($unc"ion(,
$-a1ax(,
url3"procesa-php",
"ype3 "4567",
da"a3"idmarca="8$("2marca"-val(,
success3 $unc"ion(opciones,
$("2modelo"-h"ml(opciones!
0
0
0!
0!
<*scrip"&
+odi*o H,M&
<body&
<div& 6elec"s combinados <*div&
<div&
<label& 9arca3<*label&
<selec" id="marca"&<?php echo $opciones! ?&<*selec"& <*div&
<div&
<label& 9odelo3<*label&
<selec" id="modelo"&<op"ion value="0"&(li)e un
modelo<*op"ion&<*selec"&<
*div&
<*body&
Arc'i(o: procesa)p'p
#ste codigo recibe el idmarca, hace la conexion a la base de datos y obtiene los modelos de
la marca elegida y crea una cadena con las opciones para el select! Al /inal se imprime la
cadena, con esta cadena se rellena el select modelo!
<?php
i$(isse"($+4567."idmarca"/
,
$opciones = '<op"ion value="0"& (li)e un modelo<*op"ion&'!
$conexion= new mysqli("servidor","usuario","password","base",3306!
$s"r#onsul"a = "selec" id, modelo $rom modelo where idmarca = "-
$+4567."idmarca"/!
$resul" = $conexion%&query($s"r#onsul"a!
while( $$ila = $resul"%&$e"ch+array(
,
$opciones-='<op"ion value="'-$$ila."id"/-'"&'-
$$ila."modelo"/-'<*op"ion&'!
0
echo $opciones!
0
?&
&es dejo el enlace del demo y la descar*a) Suerte---