Select combinados mediante JQuery + Ajax + PHP + MySql

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!!!

22 comentarios en “Select combinados mediante JQuery + Ajax + PHP + MySql”

  1. Salva dice:

    Hola buenas tardes;

    Se que esto no es un foro pero me gustaría comentarte lo siguiente.

    Estoy trabajando con php y mysql, tengo un archivo php(catalogo.php) el cual me muestra datos de una BD, estos datos mostrados tienen una casilla de selección mediante “checkbox” y funciona perfectamente.
    El problema es que no consigo que se muestren los datos seleccionados por el “checkbox” en otro archivo llamado (mostrarproductos.php) , el cual es el que se encarga de mostrar los datos elegidos para mostrarlos en una sola linea.
    ¿Alguna idea de como poder mostrar los datos seleccionados?
    A continuación dejo los codigos que estoy utilizando;

    (catalogo.php)
    <?php
    include("configuracion.php");
    $conexion = mysql_connect($huesped,$usuario,$clave)
    or die ("no se puede conectar");
    $db = mysql_select_db($basededatos,$conexion)
    or die ("no se puede conectar");

    //Creamos formulario con las listas de seleccion

    $consulta = "SELECT * productos ORDER BY nombre_producto";
    $resultado = mysql_query ($consulta)
    or die ("No conexion");

    echo "\n”;
    echo “”;
    $contador=1;
    while ($fila = mysql_fetch_array($resultado))
    {
    extract($fila);
    echo “\n”;
    echo “$nombre_producto“;
    echo ”
    $descripcion_producto”;
    echo “”;
    $contador++;
    }
    echo “”;
    echo ”
    \n”;
    ?>
    (Este archivo muestra los productos en una tabla con el nombre del producto y su descripción)

    (mostrarproductos.php)
    <?php
    include("configuracion.php");
    $conexion = mysql_connect($huesped,$usuario,$clave)
    or die ("no se puede conectar");
    $db = mysql_select_db($basededatos,$conexion)
    or die ("no se puede conectar");

    //Mostramos los productos elegidos mediante checkbox

    $consulta = "SELECT * FROM productos WHERE nombre_producto=\"{$_POST['interes']}\"";
    $resultado = mysql_query ($consulta)
    or die ("No conexion");

    echo "”;
    echo “Ver\n”;

    $contador=1;
    while ($filas = mysql_num_rows($resultado))

    {

    extract($fila);
    if ($contador == 1)
    echo “\n”;
    echo “{$fila[‘nombre_producto’]}\n”;
    echo ”
    {$fila[‘descripcion_producto’]}\n”;
    {
    echo “revisado”;
    }

    $contador++;
    }
    echo “”;
    ?>
    (Este archivo es el que me da problemas ya que no consigo que muestre nada)
    Si alguien es tan amable de ayudar lo agradecería….
    Saludos

  2. Armando Solano dice:

    Excelente solucion que además se puede adecuar a otros requerimientos, gracias

  3. Gerardo dice:

    Muy bueno. Pregunta como hago para incluir 2 select más al script

    $(document).ready(function(){
    $(“#marca”).change(function(){
    $.ajax({
    url:”procesa.php”,
    type: “POST”,
    data:”idmarca=”+$(“#marca”).val(),
    success: function(opciones){
    $(“#modelo”).html(opciones);
    }
    })
    });
    });

    Gracias!!!

  4. Matias dice:

    Buenas, primeramente, muy bueno el ejemplo, me sirvio mucho. Pude aplicarlo a mi proyecto y esta casi bien. El problema es que me trae los datos de ambas listas, y hace el trabajo, pero en lugar de mostrarme la descripcion de las tablas, me las muestra en blanco. Me doy cuenta que funciona, porque me pone cada lista basada en la cantidad que tengo en mi BD y la segunda varia si en la primera selecciono otra opcion, pero por algun motivo las muestra en blanco. Alguna posible solucion? agradezco de antemano

  5. Julio Ortiz dice:

    Resolvi una inconsistencia en la manera de mostrar la información de la base de datos en la lista de MARCA. Solo agrupe los resultados en la consulta de a MySQL:

    SELECT id,marca FROM catalogo GROUP BY marca;

    Con eso muestra las marcas sin repetirse.
    Creo que existe una manera de optimizarlo, pero aun no lo resuelvo. Supongo que seria poner un valor numero en la base de datos y el script detectar que si es 1, 2 o 3 ponga la marca.
    Pero por ahora puede servirle a alguien esta manera.

  6. alvaro dice:

    super bueno

  7. victor dice:

    muy buenos aportes, gracias

  8. rafael dice:

    hola queria muy buen ejemplo me salio los select anidados pero una pregunta como guardar la seleccion de datos en la base de datos mysql pues cuando lo guardo lo que me guarda es el ID del producto y no el producto en si

    1. sun2012 dice:

      en vez del id en el value muestra el nombre del producto, saludos.

  9. murainisco dice:

    no veo el area de descarga, gracias

  10. jufaba dice:

    muy buen tutorial y muy sencillo, pero tampoco yo puedo ver el link de descarga..gracias

  11. Rocio dice:

    Buenas ante todo dar las gracias por tan buenos aportes que hay, he utilizado dos tutoriales de jquery, este para anidar combos, que me funciona a la perfeccion.
    Y otro de jquery para enviar datos de un formulario a la base de datos, vamos un registro.
    Y viene aqui mi problema.
    Todo funciona ok, los combos se rellenan, y el formulario se envia y realiza el registro de la base de datos, pero sin los datos del segundo combo.
    Es decir, el combo dependiente que imprime el archivo “procesa.php” el script de envio no lo coje, y no se como solucionarlo.
    Si alguien sabe otra manera de anidar combos que no sea de esta por favor.
    Muchas gracias

  12. Rocio dice:

    Solucionado!
    Por fin lo conseguí, despues de 6 horas con el dichoso script.
    Explico la solucion por si alguien se encuentra con este mismo problema.
    si quereis poner dos combos dependientes en un registro, con un script como el de este tutorial (que va genial!) hay un problema a la hora de enviar datos a un fichero.php para la inserccion en la BD.
    El problema viene a que el fichero procesa.php imprime tanto las “” como el propio “” y por tanto el script de envio no lo toma como un elemento del formulario.
    La clave para solucionarlo es que el fichero procesa.php solo imprimas las “options” y para ello necesitamos otro script que no vincule con un div, sino con el propio elemento select.

    En resumen:
    $(document).ready(function(){
    $(“#marca”).change(function () {
    $(“#marca option:selected”).each(function () {
    id_category = $(this).val();
    $.post(“subcategories.php”, { id_category: id_category }, function(data){
    $(“#modelo”).html(data);
    });
    });
    })
    });
    Este codigo es el que hace que se impriman las optiones en el select con id “modelo”
    Y de esta manera ya se envia correctamente.
    No se si puedo poner aqui enlaces a otras página de donde he encontrado el script que me ha dado la solucion.
    Si alguien la quiere dejen un post y la pongo. Saludos. y GRACIAS

    1. Ignacio dice:

      Rocío, cómo lo solucionaste me estoy quebrando la cabeza y no le doy solución, Gracias de antemano si me echas una mano.

  13. Rocio dice:

    perdon por la parrafada, me he equivocado de sitio al postear :((((((

  14. Marcos dice:

    quiero que el combobox descuente los datos que ya tiene la tabla
    osea libro tiene 9 libros y cuando yo agregue uno ala tabla tiene q desaparecer del combo, me dijeron q todo esta en la consulta del combo q tengo q modificar ahi

    Libro:
    0)
    {
    while($row=mysql_fetch_array($resultado))
    {
    $rptaL.=””.$row[“libro”].”” ;
    }
    echo $rptaL;
    }
    ?>

  15. Pablo dice:

    gracias me salvaste (y)

  16. maria dice:

    disculpa soy principiante, necesito crear una función primero?

  17. Jorge dice:

    Hola ! buen tutorial, lo estoy intentando y me carga los datos en el primer select pero al escoger algún elemento no me muestra los de la segunda, están en tablas distintas la primera tiene id_marca y nombre de marca y la otra id_marca y modelos de autos, cuál puede ser el error, mi código es:

    index.php

    query($strConsulta);
    $opciones = ‘ Elige una marca’;
    while( $fila = $result->fetch_array() )
    {
    $opciones.=”.$fila[“nombre”].”;
    }

    ?>

    Selects combinados JQuery + Ajax + PHP + MySQL

    $(document).ready(function(){
    $(“#delegacion”).change(function(){
    $.ajax({
    url:”procesa.php”,
    type: “POST”,
    data:”id_marca=”+$(“#nombre”).val(),
    success: function(opciones){
    $(“#modelo”).html(opciones);
    }
    })
    });
    });

    Búsqueda de Autos por Marca
    Marca:

    Modelo:

    Elige un modelo

    procesa.php

    <?php
    if(isset($_POST["id_marca]))
    {
    $opciones= ' Elige un modelo’;
    $conexion = new mysqli(“host”,”user”,pass’,”db”,3306);
    $strConsulta = “select id_marca, nombre from modelos where id_marca = “.$_POST[“id_marca”];
    $result = $conexion->query($strConsulta);

    while( $fila = $result->fetch_array() )
    {
    $opciones.=”.$fila[“modelo”].”;
    }

    echo $opciones;
    }
    ?>

  18. Walther Torres dice:

    Me Sirvio Mucho.. GRACIAAASS..
    me costo, por que NO buscaba de un Select aotro Select…
    Lo que yo buscaba era de un Select a un Input, y soy nuevo por eso me costo… compartire mi codigo por si alguien busca lo mismo que yo, se le haga mas facil 🙂

    **********Select Anidado a un Input******

    *****este es el codigo d ela pagina****
    query($consulta);

    $opciones = ‘–selecciona un parametro–‘;
    while($fila = $result ->fetch_array())
    {
    $opciones.=”.$fila[“Parametro”].”;
    }
    ?>

    Manteminimiento parametros

    $(document).ready(function(){
    $(“#nombre_parametro”).change(function(){
    $.ajax({
    url:”PHP/procesa.php”,
    type: “POST”,
    data:”Id_Parametro=”+$(“#nombre_parametro”).val(),
    success: function(opciones){
    $(“#valor_parametro”).html(opciones);
    }
    })
    });
    });

    Manteminimiento parametros

    Nombre parametro


    ****este es el codigo de el.PHP, el cual llame “procesa.php”*****
    query($consulta);

    while( $fila = $result->fetch_array() ){
    $opciones .= ‘Valor del parametro’;
    }
    echo $opciones;
    }
    ?>

    ****solo tendrian que cambiar los campos segun sea su base de Datos, mi correo por cualquier cosa: walthertorres20@gmail.com***********
    *****Muchas Gracias*****

  19. alex dice:

    Hola que tal me gustaría saber como podría hacer un directorio empresarial con base de datos php alguien me podría auxiliar? se lo agradecería. Lo que necesito es el combobox para seleccionar las distintas divisiones de las empresas y que me muestre la empresa que clicke con su dirección teléfono y ubicación, gracias

Deja un comentario