Genesis Vargas J

Cargar select dependiente a partir de la seleccion de otro select con AJAX y PHP

Comparte:

Hola amigos, en esta ocasión les traigo un tutorial sobre como cargar un select (lista desplegable) a partir de la opción que se escoja de otro select; es decir: que de la opción que se escoja de una lista desplegable se mostrarán las opciones en otra lista desplegable, así como cuando nos toca registrarnos y nos aparece una lista desplegable para escoger nuestro país y de la opción que escojamos nos apreceran las ciudades de nuestro país.

Este ejemplo se hace con Ajax para que se vea mas dinámico (sin tener que recargar la página), consta de 3 archivos PHP (el de la conexión a MySQL, el index.php que muestra nuestra página y el archivo que hace la consulta del select dependiente) y un archivo de estilo (.CSS) que nos dibujara lo bonito de nuestro ejemplo.

INDEX.PHP

<!DOCTYPE html>
<html lang="es">
<head>
<title>Cargar Select a Partir de la seleccion de otro Select</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<header>
    <nav>
        <h2>Cargar select dependiente a partir de la seleccion de otro select con AJAX y PHP</h2>
    </nav>
</header>
<div id="contenedor">
    <form>
        <select id="proveedor" onchange="CargarProductos(this.value);">
            <option>-Selecciona un proveedor-</option>
            <?php
            require('conexion.php');
            $query = 'SELECT * FROM proveedor';
            $result = mysqli_query($con, $query);
            while($row = mysqli_fetch_array($result, MYSQL_ASSOC))
            {
                echo '<option value="' .$row["IdProveedor"]. '">' .$row["NombreProveedor"]. '</option>';
            }
            mysqli_close($con);
            ?>
        </select>
        <br style="clear:both;">
        <select id="productos"></select>
    </form>
    <div id="respuesta"></div>
</div>
<footer>
    <p><img alt="Licencia GPLV3" style="border-width:0" src="http://www.gnu.org/graphics/gplv3-88x31.png" />
Esta aplicación está bajo una licencia GPL V3.
Diseñado y Programado por: <a href="http://genesisvargasj.com">Genesis Vargas J.</a> 2014</p> </footer> <script> function CargarProductos(val) { $('#respuesta').html("<img src="loader.gif" /> Por favor espera un momento"); $.ajax({ type: "POST", url: 'consulta.php', data: 'idproovedor='+val, success: function(resp){ $('#productos').html(resp); $('#respuesta').html(""); } }); } </script> </body> </html>

En este archivo colocamos nuestra estructura HTML y por lo tanto creamos los dos select el principal le asignamos un ID=proveedor, en el evento OnChange llamamos la función CargarProductos, le pasamos como parametro This.Value que vendría siendo el valor del select e incrustamos un código PHP para llenar ese select con la respectiva consulta para obtener todos los proveedores de nuestra BD. En el select dependiente le asignamos un ID=producto para identificarlo, Al final escribimos un Script con una función llamada CargarProductos que es la que se va a llamar cuando el usuario escoja una opción del primer select; en esta función lo primero que hacemos es mostrar un mensaje de carga en el div respuesta y seguidamente utilizamos la función ajax de jquery con el metodo post y con el parametro idproveedor que recogemos del select para pasarselo al archivo consulta.php donde estara el codigo que hara la consulta para retornar los productos asociados con el proveedor que escojamos.

CONEXION.PHP

<?php
$con = new mysqli("localhost", "root", "", "tienda");
if ($con->connect_errno)
{
    echo "Fallo al conectar a MySQL: (" . $con->connect_errno . ") " . $con->connect_error;
    exit();
}
@mysqli_query($con, "SET NAMES 'utf8'");
?>

En este archivo hacemos la conexion a mysql con la funcion mysqli

CONSULTA.PHP

<?php
require("conexion.php");
$prove = mysqli_real_escape_string($con, $_POST["idproovedor"]);
$query = 'SELECT * FROM inventario WHERE IdProveedor = "'.$prove.'"';
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC))
{
    echo '<option value="' .$row["IdPrducto"]. '">' .$row["Producto"]. '</option>';
}
mysqli_close($con);
?>

Aquí hacemos la consulta para seleccionar los productos que tengan relación con el idproveedor que nos manda el script de ajax, a esa variable post le pasamos la función mysqli_real_scape_string para parsearla, mientras rescatamos el array le imprimimos los options del select con los valores de la consulta.

Bueno eso es todo espero que les sirva mucho para aprender y practicar. Les dejo una carpeta comprimida para que descarguen el ejemplo y también un demo para que lo vean en funcionamiento. Si te gustan mis aportes no dudes en compartirlos, escribir tu comentario, dar like, contribuir, etc.

DEMO

Comentarios


genesis vargas

Soy Genesis Vargas Jiménez, autor de éste blog. Me gusta desarrollar software en todas las plataformas (web, móvil y desktop) y compartir conocimiento para ayudar a muchas personas.

Desde el 2015 soy MVP Microsoft en Visual Studio y tecnologías de desarrollo, reconocimiento que me enorgullece mucho.

MVP Genesis Vargas J

A PHP Error was encountered

Severity: Core Warning

Message: Module 'timezonedb' already loaded

Filename: Unknown

Line Number: 0

Backtrace: