Cargar un select o lista desplegable desde otro select PHP + AJAX + MySQL by codigojerry.blogspot.com

Fuente: codigojerry.blogspot.com.es

Para cargar o llenar un select con datos de la base de datos a partir de otro select utilizamos AJAX y el evento onchange de JavaScript. El siguiente ejemplo consta de una base de datos compuesta por dos tablas una llamada continente y otro pais. Cuando se selecciona un continente aparece unos cuantos paises perteneciente a ese continente, para ello las tablas tienen que estar obligatoriamente relacionadas.


El ejemplo está dividio en cuatro archivos:

El archivo conexion para conectarnos a la base de datos.

conexion.php

<?php

function conexion(){

$con = mysql_connect("localhost","root","");

if (!$con){

die('Could not connect: ' . mysql_error());
}

mysql_select_db("database", $con);

return($con);

}

?>

Este archivo es la vista al usuario. Contiene el primer select donde cargamos en él los continentes almacenados en la base de datos. Tiene como atributo el evento onchange de JavaScript el cual ejecuta la funcion ajax load() cada vez que se hace clic sobre una opcion (continente).

index.php

<?php
include 'conexion.php';
?>
<!DOCTYPE html>

<html>

<head>

<script src="ajax.js"></script>

</head>

<body>

<h2>HTML - PHP - AJAX - MySQL</h2>

<?php

$con=conexion();
$res=mysql_query("select * from continente",$con);

?>

<select id="cont" onchange="load(this.value)">

<option value="">Seleccione</option>

<?php

while($fila=mysql_fetch_array($res)){

?>

<option value="<?php echo $fila[codigo]; ?>"><?php echo $fila[nombre]; ?></option>

<?php } ?>

</select>

<div id="myDiv"></div>

</body>

</html>

El archivo ajax.js es un archivo javascript el cual contiene la funcion load(), esta cáptura el código del continente seleccionado y se lo envía al archivo proc.php a través de la variable q y con el método post para que lo procese.

ajax.js

function load(str)
{
var xmlhttp;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","proc.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+str);
}

Finalmente este archivo captura el código del continente para hacer una consulta a la base de datos y mostrar en otro select los paises del continente seleccionado. El resultado se visualiza en el div con id igual a myDiv ubicado en el archivo index.php

proc.php

<?php
include 'conexion.php';

$q=$_POST['q'];
$con=conexion();

$res=mysql_query("select * from pais where cod_cont=".$q."",$con);

?>

<select>

<?php while($fila=mysql_fetch_array($res)){ ?>
<option><?php echo $fila[nombre]; ?></option>
<?php } ?>

</select>

Demo/Código fuente

Anuncios

10 comentarios sobre “Cargar un select o lista desplegable desde otro select PHP + AJAX + MySQL by codigojerry.blogspot.com

  1. excelente, pero como se haria si la lista desplegable tiene varias opciones, como se le puede poner a cada opcion una consulta a la bd y que cada consulta cargue un ajax. saludos y gracias

    1. hola compi

      pues asi a vote pronto y en teoria porque no tengo tiempo para probarlo te digo ….

      si te fijas en el desplegable se le pasa al ajax el id que es con lo que trabaja, yo lo que haria seria concatenar con una coma un literal y el id. Es decir, pais,5 o lo que necesites por ejemplo coche,56

      en el archivo proc.php haces un split de la coma ($q) y con un if gestionas la sentencia SQL que necesites en funcion del literal

      me imagino que con esta explicacion en vez de ayudarte te habre dejado mas jodido …

      seguro que hay maneras mejores de hacerlo … pero bueno yo creo que esto funcionaria bastante bien (siento no haber podido probarlo cuando tenga un rato te cuento) … y si te metes en harina ya me contaras 😀

      suerte

  2. Buen dia, he querido implementar el codigo y aplicarlo a mi sistema, estuve realizando los procedimientos y al parecer eatan correctos, pero siempre me manda el error POST 500 marcandome como error la linea final del ajax. espero me puedan ayudar

  3. Hola, probe el codigo y funciona bien, pero no puedo recibir los datos para procesar del segundo select (el que esta en el DIV), que tendria que poner para poder levantarlo?

  4. Hola!, me funciono todo a la perfeccion, salvo que no puedo levantar los datos por post del select que se conoca en el div. No se que parametros tendre que poner para recibir ese dato, del resto no hay problema. Los dos select se cargan perfecto. Si podras darme una mano te lo agradeceria!

      1. Si!, exacto. Cuando recibo los datos del formulario por post recibo todos los campos, incluso los del primer select, pero no recibo el campo del segundo select (el que se genera dentro del Mydiv). Gracias!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s