Cómo cargar dinámicamente un select con jquery – javascript

Cómo cargar dinámicamente un select con jquery - javascript




Hoy os presento dos formas distintas de cómo cargar dinámicamente en un campo desplegable de HTML (select) a través de la librería de Javascript JQUERY llamando a un webservice en PHP que extrae los datos de una base de datos MySQL.

Para ello nos basaremos en un ejemplo con dos maneras de cargar el select. En la primera, se carga automáticamente un campo  desplegable con los países de nuestra base de datos MySQL de una forma sencilla con una llamada en AJAX, al seleccionar el país utilizaremos la segunda forma con la devolución de un objeto JSON desde otro webservice en PHP.

 

Ejemplo sencillo con una llamada en AJAX

Lo primero que haremos es crear la parte en HTML, hay varias formas de hacerlo pero me he decantado por un DIV que incluye nuestro SELECT

 

En segundo lugar, dentro del mismo archivo HTML le añadiremos el script en Javascript con una llamada AJAX de JQUERY a nuestro webservice getPaises.php y que nos inserte el resultado en el select dentro del div que tiene la clase selector-pais (“.selector-pais select”).

 

Finalmente construiremos nuestro webservice PHP en el que primero llamaremos a nuestra base de datos y haremos que nos devuelva los valores directamente en las etiquetas OPTION para insertarlas dentro de nuestro SELECT.

 

Ejemplo con una respuesta en JSON

En este segundo ejemplo vamos a utilizar una manera más elegante, nuestro webservice nos devolverá un JSON y nuestro script lo añadirá a nuestro campo desplegable.

En este caso rescataremos el valor del país seleccionado del SELECT del ejemplo anterior y con ese valor nuestro webservice PHP devolverá las regiones de ese país.

Empezamos con la parte HTML que es idéntica a la del otro ejemplo, sólo le cambiamos la clase del DIV.

 

Ahora insertamos nuestro script en el que cada vez que se actualice el SELECT de paises del ejemplo anterior(“.selector-pais select”), realizará una llamada $.getJSON que recogerá el JSON enviado desde el servicio web(getRegionesJson.php), lo recorrerá con un .each y añadirá cada elemento como option con .append de JQUERY a nuestro select, en este caso “.con-json select”.

 

Finalmente, nuestro webservice PHP, conecta con nuestra base de datos y el resultado lo guarda en un array que luego transforma en JSON con json_encode y lo muestra con print_r.

 

Y ya tendríamos nuestro ejemplo acabado, podéis ver una demo en:

http://bitacoraweb.info/code/cargar-select-dinamicamente/

Y lo podéis descargar:

Download

Descargas realizadas: 3.060

Espero que os sea útil.





Comments

  1. Excelente aporte, me sirvio bastante.
    Saludos

    • Muchas gracias David, me alegro que te sirviera.

      • Hola buenas tardes, estoy revisando el ejemplo de Cómo cargar dinámicamente un select con jquery – javascript, tengo en estos momentos un problema con una pagina en php y es que debo seleccionar en un combo un regimen asegurador y dependiendo de este me debe mostrar en otro campo el listado del pagador agrupado que pertene a ese régimen. Como puedo hacer para que me muestre en el segundo campo de acuerdo a lo seleccionado en el primero.
        Estoy utilizando PHP, mysql.
        Le agradezco su ayuda.

        • Gracias por tu comentario Milton, por lo que entiendo de tu comentario, seria lo mismo que el ejemplo pero en vez de región seria pagador y en vez de país seria regimen asegurador. Si necesita una asesoría específica también podríamos presupestarle una para su caso concreto.

          • Gracias, ya tengo implementado el codigo, pero al consultar o seleccionar el regimen no me esta cargando el pagador, me puede por favor colaborar o indicarme en que estoy fallando. Usted me dira si le envío el codigo que tengo para esto.
            Gracias

          • Hola de nuevo Milton,

            Si quieres que mire tu código gratuitamente debe ser público para que lo puedan aprovechar otras personas, en cambio si necesitas una asesoría en privado te la puedo presupuestar, escríbeme en info@bitacoraweb.info

            Saludos.

          • Gracias por su aporte, el siguiente es el codigo que estoy tratando de implementar.

            Ejemplo de Pagador de Acuerdo al Régimen Asegurador

            Regimen:

            <?PHP
            $query="SELECT secuencia,nombre_reg_asegurador FROM reg_asegurador WHERE estado = 'A' ORDER BY nombre_reg_asegurador";
            $resultreg = mysql_query($query) or die("Ocurrio un error en la consulta SQL");
            mysql_close();
            echo 'Seleccionar’;
            while (($fila = mysql_fetch_array($resultreg)) != NULL) {
            echo ”.$fila[“nombre_reg_asegurador”].”;
            }
            // Liberar resultados
            mysql_free_result($resultreg);

            // Cerrar la conexión
            mysql_close($dbd);
            ?>

            $(document).ready(function() {
            $.ajax({
            type: “POST”,
            url: “getRegimen.php”,
            success: function(response)
            {
            $(‘.regimen_asegurador select’).html(response).fadeIn();
            }
            });

            });

            Pagador:

            $(document).ready(function() {
            $(“.regimen_asegurador select”).change(function() {
            var form_data = {
            is_ajax: 1,
            regimen: +$(“.regimen_asegurador select”).val()
            };
            $.ajax({
            type: “GEST”,
            url: “getPagador.php”,
            data: form_data,
            success: function(response)
            {
            $(‘.pagador select’).html(response).fadeIn();
            }
            });
            });

            });

          • Hola Milton,

            Lo único que veo raro en este código es esta línea: regimen: +$(“.regimen_asegurador select”).val()

            El + despues de los : no tiene mucho sentido, pero no sé si es suficiente para que no funcione.

            Si no es eso, el problema podría estar en getPagador.php

  2. Los links están caídos 🙁

  3. Por curiosidad, ¿saben a que se debe que la linea

    $(“.selectsFrmAgregar select”).empty();

    provoque que ninguna función de mi archivo externo Javascript+Jquery no se ejecuten en mi archivo html?

  4. Es necesario tener la informacion en la base de datos? o se pueden obtener de una fuente externa?

  5. Excelente aporte; tendrás algo parecido a esto pero con BD SQL. Estoy tratando este mismo procedimiento pero no puedo conseguir que el Select que realiza a la BD me arroje como un array. Solo estoy utilizando HTML y Javascript tengo una aplicación que no permite realizar las consultas con otros lenguajes. Por favor si podrías ayudarme con este procedimiento..

    • Hola Elardk, podrías mostrarme el código para poder indicarte mejor.

      Si sólo puedes utilizar HTML y Javascript no podrás atacar a la base de datos directamente, una opción es crear un archivo JSON y llamarlo con getJSON como comentaba en el comentario anterior, o directamente crear un array o un JSON dentro del código Javascript como por ejemplo [{“id”:”1″,”value”:”Argentina”},{“id”:”2″,”value”:”Brasil”}]

  6. Oye en la descarga no viene la base de datos, de donde se puede descargar?

    • Os pongo aquí la estructura de la base de datos aunque podéis utilizar cualquier estructura y cambiar el código:

      CREATE TABLE IF NOT EXISTS paisos (
      id int(10) unsigned NOT NULL,
      nom varchar(80) COLLATE utf8_spanish_ci NOT NULL,
      id_continent int(10) unsigned NOT NULL DEFAULT ‘0’,
      abreviacio text COLLATE utf8_spanish_ci,
      seleccionable int(11) DEFAULT NULL,
      zona int(11) NOT NULL DEFAULT ‘0’,
      categoria int(11) NOT NULL DEFAULT ‘0’,
      estatlliga int(11) NOT NULL DEFAULT ‘0’ COMMENT ‘0:bloquejat, no poden elegir equips; 1- Activa, es poden elegir equips’
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=227 ;

      CREATE TABLE IF NOT EXISTS regions (
      id int(10) unsigned NOT NULL,
      nom varchar(50) COLLATE utf8_spanish_ci DEFAULT NULL,
      id_pais int(10) unsigned NOT NULL,
      proporcio int(11) NOT NULL DEFAULT ‘0’ COMMENT ‘per calcular d”on es el jugador’
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=3334 ;

  7. Por alguna razón no funciona en internet Explorer 11, sabras la causa?
    Revise en Chrome y funciona correctamente.

    Saludos

    • A mi me funciona correctamente en Internet Explorer 11, que es lo que no te funciona? Puede ser algún problema de configuración del mismo, puedes intentar restablecer la configuración inicial.

  8. Muchas gracias me funciono perfectamente, quisiera preguntarte,si en el primer ejemplo quisiera capturar un valor de un input type text y este valor enviarlo con el metodo post al archivo .php como podria hacerlo??

    • Hola John Rodrigo,

      Debería funcionarte añadiendo a la llamada AJAX lo siguiente:

      data: “id=” + $(‘#idinputtext’).val() ,

      Quedaría de esta manera:

      $.ajax({
      type: “POST”,
      url: “getPaises.php”,
      data: “id=” + $(‘#idinputtext’).val() ,
      success: function(response)
      {
      $(‘.selector-pais select’).html(response).fadeIn();
      }
      });

      También deberías recoger el parámetro id en el archivo PHP (getPaises.php) e incorporarlo a la consulta:

      Espero que te sirva.

  9. Hola Buen día, gracias por el aporte, pero ahora tengo una duda, después como puedo hacer un update para actualizar las regiones. los países ya pude. Muchas gracias

  10. Hola me ha funcionado bien!! muy bueno… solo una pregunta ¿como le hago para que el php que quiero cargar lo deposite en otro div que no sea el de selector-pais? Gracias

    • Gracias Felix,

      Pues para volvarlo en un div seria algo por el estilo en el caso que sólo haya un div dentro del objeto con estilo con-json: $(“.con-json div”).append(value+’
      ‘);

      Si le pones clase a tu div: $(“.con-json .clase-del-div”).append(value+’
      ‘);

      Saludos.

  11. Hola, el primer archivo si me funciona pero el segundo no a, q se debe ya lo modifique pero no me funciona, en la palabra pais la cambio ya que segun entiendo esa es la que se manda el valor que recibe el request en el archivo getprovincias, asi que la cambie por otra que all final me imagino q esa es la q guarda el primer valor del select y con eso se accede a la base pero no me funciona

  12. ¡Muchas gracias! Me fue de gran utilidad.

  13. Podrias pasarme el link de descarga el que sale alli esta caido, copio el codigo tal cual como lo tienes en los ejemplos pero no me funciona para nada 🙁

  14. Disculpa, al momento de traer las cosas de la base de datos y mostrarlo en el select no muestra los acentos, como podria corregir eso? Gracias de antemano.

  15. Hola buenas tardes, primero que nada te felicito por el tutorial me funciono al 100%, solo una duda,

    Si quiero que en el combo que se llene de manera automatica tenga un opcion como la del primero (Seleccionar), como se lo agregaria? ya que por default selecciona la primera opcion pero como le agregue otro combo, tengo que seleccionar la segunda y despues de nuevo la primera para que me traiga la info en el tercer combo.

    Le agregue en el segundo y tercero un option value pero obviamente al cargar se borra.

    Asi los tengo:

    Activo:

    $(document).ready(function() {
    $.ajax({
    type: “POST”,
    url: “ajax_activo.php”,
    success: function(response)
    {
    $(‘.selector-activo select’).html(response).fadeIn();
    }
    });

    });

    Marca:
    Seleccionar

    $(document).ready(function() {
    $(“.selector-activo select”).change(function() {
    $(“.selector-marca select”).empty();
    $.getJSON(‘ajax_marca.php?activo_id=’+$(“.selector-activo select”).val(),function(data){
    $.each(data, function(id,value){
    $(“.selector-marca select”).append(”+value+”);
    });
    });
    });
    });

    Modelo:
    Seleccionar

    $(document).ready(function() {
    $(“.selector-marca select”).change(function() {
    $(“.selector-modelo select”).empty();
    $.getJSON(‘ajax_modelo.php?modelo_id=’+$(“.selector-marca select”).val(),function(data){
    $.each(data, function(id,value){
    $(“.selector-modelo select”).append(”+value+”);
    });
    });
    });
    });

    • Ya vi como, solo se agrega esta linea antes del $each
      $(“.selector-modelo select”).append(‘Seleccionar’);

      $(document).ready(function() {
      $(“.selector-marca select”).change(function() {
      $(“.selector-modelo select”).empty();
      $.getJSON(‘ajax_modelo.php?modelo_id=’+$(“.selector-marca select”).val(),function(data){
      $(“.selector-modelo select”).append(‘Seleccionar’);
      $.each(data, function(id,value){
      $(“.selector-modelo select”).append(”+value+”);
      });
      });
      });
      });

      Saluods

      • Hola Rodolfo,

        Me alegro que te funcionara correctamente. Efectivamente, esa es una manera, otra desde los archivos PHP que devuelven las regiones, sería añadir esta línea:

        echo ‘‘;

        Saludos.

  16. Muchas gracias.
    Me fue muy útil para mis filtros.
    Tengo una duda, si por ejemplo quiero traer la consulta a una tabla , o a una caja de texto, en ves de a un select, que debería cambiar.
    Porque estoy intentando que me muestre los resultados en una tabla pero no me aparece nada.
    Si me podría explicar como se lo agradeciera mucho, pero utilizando ajax, como en el primer ejemplo, no utilizando json.
    Muchas gracias.

  17. Buenas tardes, ¡Excelente aporte! Ya estáis en mis favoritos!
    Tengo una serie de problemas al hacer la llamada al JSON y es que el segundo option no me reconoce la variable.

    Tepego aquí el código a ver si puedes echarmeun cable.

    sanciones.php

    Elige un país

    $(document).ready(function() {
    $.ajax({
    type: “POST”,
    url: “busc_equipo.php”,
    success: function(response)
    {
    $(‘.selector-pais select’).html(response).fadeIn();
    }
    });

    });

    Este es un ejemplo con JSON
    Regiones:

    $(document).ready(function() {
    $(“.selector-pais select”).change(function() {
    $(“.con-json select”).empty();
    $.getJSON(‘busc_jug.php?id_equipo=’+$(“.selector-pais select”).val(),function(data){
    $.each(data, function(id,value){
    $(“.con-json select”).append(”+value+”);
    });
    });
    });
    });

    busc_equipo.php (Corresponde al primero y funciona bien)
    <?php

    require("../conexionBD.php");

    $query="SELECT id_equipo, nombre_equipo FROM equipos ORDER BY nombre_equipo";
    $result = mysqli_query($conexion, $query)
    or die("Ocurrio un error en la consulta SQL");
    mysqli_close($conexion);
    echo 'Seleccionar’;
    while (($fila = mysqli_fetch_array($result)) != NULL) {
    echo ”.$fila[“nombre_equipo”].”;
    }
    // Liberar resultados
    mysqli_free_result($result);

    // Cerrar la conexión
    mysqli_close($conexion);

    ?>

    ¡Muchas gracias!

    busc_jug.php (corresponde al segundo option)

  18. Te pego aquí el código que se ha cortado

    <?php

    require("../conexionBD.php");

    $query="SELECT id_equipo, nombre_equipo FROM equipos ORDER BY nombre_equipo";
    $result = mysqli_query($conexion, $query)
    or die("Ocurrio un error en la consulta SQL");
    mysqli_close($conexion);
    echo 'Seleccionar’;
    while (($fila = mysqli_fetch_array($result)) != NULL) {
    echo ”.$fila[“nombre_equipo”].”;
    }
    // Liberar resultados
    mysqli_free_result($result);

    // Cerrar la conexión
    mysqli_close($conexion);

    ?>

    • Hola Luis,

      Perdona el retraso en contestar.

      busc_jug.php solo te funciona, haciendo una prueba como busc_jug.php?id_equipo=1 ?

      De todas maneras en la parte javascript puedes depurar en la consola con console.log() para localizar el fallo, si te devuelve o no.

  19. Hola, disculpa la molestia, pero no manejo php, sino jsp y me gustaría saber si podrías poner un ejemplo de este mismo código pero para aplicarlo en jsp.

    Gracias

    • Hola Laura,

      Aplicarlo en otro lenguaje de programación sería sencillo, cambiar los webservices php por webservices jsp(en tu caso) que extraiga los datos de la bbdd y los muestre en el mismo formato. Una vez creados, sólo cambiar en la llamada javascript la extensión correcta del archivo del webservice.

      Saludos.

  20. Muy buen aporte, Gracias!!
    quería incluir ahora un tercer select, le estoy aplicando la misma lógica pero no me funciona

    $(document).ready(function() {
    $(“.con-jon select”).change(function() {
    $(“.otro-con-json select”).empty();
    $.getJSON(‘getCrono3Json.php?crono2=’+$(“.con-jon select”).val(),function(data){
    $.each(data, function(codigocrono,value){
    $(“.otro-con-json select”).append(”+value+”);
    });
    });
    });
    });

    quiero obtener unos datos que están organizados del modo por ejemplo: 01 || 01.01 || 01.01.02 tiene un campo nivel en el que se define cada uno, en el select 1 muestro los que se corresponden con 01 nivel 1 y carga en el Select 2 los que son 01.01 nivel 2, y ahora en el select3 querría cargar los que son 01.01.02 nivel 3, pero de este modo no me carga. Seguro que es sencillo, pero no acierto con ello.

    • respecto al anterior comentario, tenía un fallo en el nombre del select, aunque una vez corregido, si veo los valores en la consola pero no me rellena el tercer select… ups!

      el primer select envía el codigo “01” y obtiene los siguientes valores que mete en el select2, este a su vez envía el codigo “01.01” aunque solamente obtengo un response con el código correcto “01.01.01” y el nombre que le corresponde a ese valor, pero no rellena el tercer select.

  21. SOLUCIONADO!! xD tenía mal el nombre del select en la página principal, si es que no hay nada como levantarse y darse una vuelta.

    Gracias de nuevo, me ha servido de muchísimo este ejemplo que has puesto.

  22. Hermano muchas gracias llevaba dos dias tratando de hacer esto y no me había salido.

  23. Muy buena explicacion, muchas gracias bitacora web.
    Me funciono a la perfeccion.

    Pero me estan saliendo un notice y un warning.

    Esto es lo que me sale:
    Notice: Undefined index: departamento in C:\xampp\htdocs\participantes\conexion.php on line 34
    Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in C:\xampp\htdocs\participantes\conexion.php on line 44

    A que se deben estos mensajes, aunque el coidgo me funciona bien, me estan saliendo estas advertencias.

    Ademas de que me funciono no comprendo bien algunas partes del codigo, para ver si me puede explicar.

    1.Tengo un par de dudas en cuanto a la funcion $.getJSON(‘getRegionesJson.php?pais=’+$(“.selector-pais select”).
    Lo que no comprendo bien de esa funcion es donde dice pais que se encuentra despues del signo de interrogacion(getRegionesJson.php?pais)
    no entiendo bien de adonde sale esa palabra, si es una variable, un identificador. no se a que hace referencia, aunque lo acomode a mi codigo y me funciono, no lo logro entender todavia jajajaj.
    porque no veo esa palabra declarada en ningun otro lado ni en ningun otro archivo php.

    2. La otra parte que yampoco entiendo es esta linea de codigo:
    $(“.con-json select”).append(”+value+”);
    De esa linea de codigo lo que no logro compreder bien es lo que esta adentro de append: +id+ y +value+
    esto que valores coge o de donde salen o que hacen?

    3. y esta consulta tambien tengo una duda:
    $query=”SELECT id,nombre FROM regiones WHERE id_pais=”.$_REQUEST[“pais”].” ORDER BY nombre”;
    Donde dice $_REQUEST[“pais”], de que parte exactamente esta campturando ese valor?

    Si me pudiera explicar esto se lo agradeceria mucho, ya que me interesa aprender y terner muy claro todo.
    Gracias

  24. Aqui hay una DB publica con datos aleatorios para pruebas:
    https://jsonplaceholder.typicode.com/users

    Como sería el codigo si quiero seleccionar unicamente los mails de estos usuarios? No se hacer el codigo en javascript, alguien me ayuda?

    • Hola Siri,
      Pues siguiendo la estructura JSON que envías, habría que cambiar la estructura en las líneas javascript:

      $.each(data, function(id,value){
      $(“.con-json select”).append(‘‘);
      });

      Debería probarlo pero seguramente sería cambiar a function(objeto) y en vez de id o value, poner objeto.email

  25. Excelente, justo lo que buscaba, solo que al descargarlo me dice que no tengo acceso al sitio

  26. Super sencillo muchas gracias, tengo una pregunta como le podría hacer para agregar 3 campos mas que al rellenar uno se cambien estos 3 simultaneamente sin JSON.

    Ejemplo:
    getPaises

    getProvincias
    getMunicipio
    getColonia

    Excelente día

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies