Select combinados mediante JQuery + Ajax + PHP + MySql

Stay hungry, stay foolish

Steve Jobs

Hola, después de mucho tiempo de no postear nada en el blog, les traigo un pequeño tutorial sobre como crear unos select combinados  utilizando Ajax con JQuery, php y MySql, espero que les sea de utilidad. Comenzamos.

En este ejercicio vamos a crear dos selects, el primero va a cargar una lista de marcas de celulares y el segundo select va a cargar la lista de modelos dependiendo de la marca seleccionada. Los datos de marcas y modelos los vamos a obtener de una base de datos en MySql.

Vamos a utilizar 2 archivos el primero se llamara: index.php y el segundo procesa.php

Archivo: index.php

En este archivo se va a cargar el primer select con las marcas de celulares.

codigo php

Mediante este codigo se carga el primer select con las marcas de celulares.

<?php
  $conexion = new mysqli("servidor","usuario","password","base",3306);
  $strConsulta = "select id, marca from marca";
  $result = $conexion->query($strConsulta);
  $opciones = '<option value="0"> Elige una marca</option>';
  while( $fila = $result->fetch_array() )
  {
     $opciones.='<option value="'.$fila["id"].'">'.$fila["marca"].'</option>';
  }
?>

Script de Jquery

En este script se hace la petición al servidor mediante ajax, esta peticion se ejecuta cuando ocurre el evento change del select ,el archivo php que va a procesar esta peticion es “procesa.php”, el dato que se envia  al servidor es el id de la marca seleccionada. y se envian mediante POST. Si todo se ejecuta correctamente el servidor regresa una cadena con los modelos  los cuales se agregaran al select modelo.

<script type="text/javascript">
  $(document).ready(function(){
    $("#marca").change(function(){
    $.ajax({
      url:"procesa.php",
      type: "POST",
      data:"idmarca="+$("#marca").val(),
      success: function(opciones){
        $("#modelo").html(opciones);
      }
    })
  });
});
</script>

Codigo HTML

<body>
  <div> Selects combinados </div>
  <div>
     <label> Marca:</label>
     <select id="marca"><?php echo $opciones; ?></select>  </div>
  <div>
     <label> Modelo:</label>
     <select id="modelo"><option value="0">Elige un modelo</option></select><
  /div>
</body>

Archivo: procesa.php

Este 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 final se imprime la cadena, con esta cadena se rellena el select modelo.

<?php
 if(isset($_POST["idmarca"]))
 {
    $opciones = '<option value="0"> Elige un modelo</option>';
    $conexion= new mysqli("servidor","usuario","password","base",3306);
    $strConsulta = "select id, modelo from modelo where idmarca = ".$_POST["idmarca"];
    $result = $conexion->query($strConsulta);
    while( $fila = $result->fetch_array() )
    {
       $opciones.='<option value="'.$fila["id"].'">'.$fila["modelo"].'</option>';
    }
     echo $opciones;
 }
?>

Les dejo el enlace del demo y la descarga. Suerte!!!