Cómo cargar dinámicamente un select con jquery – javascript
by Bitácora Web
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
1 2 3 4 | <div class="selector-pais"> Elige un país <select></select> </div> |
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”).
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> $(document).ready(function() { $.ajax({ type: "POST", url: "getPaises.php", success: function(response) { $('.selector-pais select').html(response).fadeIn(); } }); }); </script> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $link = mysql_connect('localhost', 'usuariobbdd', 'password') or die('No se pudo conectar: ' . mysql_error()); mysql_select_db('nombrebasededatos') or die('No se pudo seleccionar la base de datos'); $query="SELECT id,nombre FROM paises ORDER BY nombre"; $result = mysql_query($query) or die("Ocurrio un error en la consulta SQL"); mysql_close(); echo '<option value="0">Seleccionar</option>'; while (($fila = mysql_fetch_array($result)) != NULL) { echo '<option value="'.$fila["id"].'">'.$fila["nombre"].'</option>'; } // Liberar resultados mysql_free_result($result); // Cerrar la conexión mysql_close($link); |
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.
1 2 3 4 5 | <div class="con-json"> <h4>Este es un ejemplo con JSON</h4> Regiones: <select></select> </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”.
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> $(document).ready(function() { $(".selector-pais select").change(function() { $(".con-json select").empty(); $.getJSON('getRegionesJson.php?pais='+$(".selector-pais select").val(),function(data){ $.each(data, function(id,value){ $(".con-json select").append('<option value="'+id+'">'+value+'</option>'); }); }); }); }); </script> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $link = mysql_connect('localhost', 'usuariobbdd', 'password') or die('No se pudo conectar: ' . mysql_error()); mysql_select_db('nombrebasededatos') or die('No se pudo seleccionar la base de datos'); $query="SELECT id,nombre FROM regiones WHERE id_pais=".$_REQUEST["pais"]." ORDER BY nombre"; $result = mysql_query($query) or die("Ocurrio un error en la consulta SQL"); mysql_close(); $regiones = array(); while (($fila = mysql_fetch_array($result)) != NULL) { $regiones[$fila['id']] = $fila['nombre']; } print_r(json_encode($regiones)); // Liberar resultados mysql_free_result($result); // Cerrar la conexión mysql_close($link); |
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:
Descargas realizadas: 2.825
Espero que os sea útil.
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
Los links están caídos 🙁
Hola Leopoldo,
Disculpa, ya lo he arreglado.
Gracias por avisar!
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?
Hola Daniel, si me envías el resto del código puedo echarle un vistazo
Es necesario tener la informacion en la base de datos? o se pueden obtener de una fuente externa?
No es necesario que sea de una base de datos. Podrías tener la información en un array o en un archivo json, en este segundo caso lo podrías llamar con la función getJSON.
Más info sobre getJSON: http://api.jquery.com/jquery.getjson/
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”}]
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(idint(10) unsigned NOT NULL,nomvarchar(80) COLLATE utf8_spanish_ci NOT NULL,id_continentint(10) unsigned NOT NULL DEFAULT ‘0’,abreviaciotext COLLATE utf8_spanish_ci,seleccionableint(11) DEFAULT NULL,zonaint(11) NOT NULL DEFAULT ‘0’,categoriaint(11) NOT NULL DEFAULT ‘0’,estatlligaint(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(idint(10) unsigned NOT NULL,nomvarchar(50) COLLATE utf8_spanish_ci DEFAULT NULL,id_paisint(10) unsigned NOT NULL,proporcioint(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 ;
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.
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.
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
Hola Luis,
Pues debería ser parecido al de modificar país, ¿cual es el problema?
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.
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
Gracias por tu comentario Dinh, ¿podrías ponernos la parte del código que no te funciona para entender mejor?
¡Muchas gracias! Me fue de gran utilidad.
Me alegro, gracias por tu comentario Nora
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 🙁
Buenas tardes Gabo,
Acabo de revisar la descarga y había un error, lo acabo de arreglar, deberías poderlo bajar correctamente ahora, gracias por avisar.
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.
Hola Jorge,
Es debido a la codificación de la tabla de la base de datos o del archivo, lo aconsejable es que sea UTF-8 pero en todo caso debería ser la misma codificación.
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.
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.
Hola Cristian,
Pues deberías cambiar el selector de la llamada JQuery para que apunte a la tabla tipo:
$(‘.selector-pais table’).html(response).fadeIn();
Y en el archivo PHP cambiar la salida por:
echo ‘
‘;
Por ejemplo, hay varias maneras de hacerlo.
Saludos.
Muchas BitácoraWeb, con lo que me acabo de explicar, ya pude meter los datos en mi tabla.
Excelente explicación y gracias por resolver nuestras dudas e inquietudes.
De nada Cristian, me alegro que te haya ayudado.
Saludos.
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)
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.
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.
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.
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.
Jejeje, no hay nada como eso. Un saludo.
Hermano muchas gracias llevaba dos dias tratando de hacer esto y no me había salido.
De nada Dajan, gracias por dejar tu comentario.
Saludos.
[…] http://bitacoraweb.info/como-cargar-dinamicamente-un-select-con-jquery-javascript/ […]
[…] http://bitacoraweb.info/como-cargar-dinamicamente-un-select-con-jquery-javascript/ […]
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
Me falto algo.
también me sale impreso al principio de la pagina dos corchetes [], porque sera, si yo no he abierto mas corchetes ni nada, y ahora me están pareciendo esos dos corchetes también.
Creo que en nuestro ejemplo no salen, no sé porqué salen en el tuyo, algo estará modificado si es así.
Saludos.
Hola Camilo,
El warning que te aperece es debido a que es mejor utilizar la nueva versión de comando de PHP para mysql, con mysqli: http://php.net/manual/es/book.mysqli.php (más adelante modificaré el artículo para cambiarlo)
Sobre las preguntas:
1. Es un parámetro para la llamada http al servicio en PHP
2. Son parámetros del $.each
3. Tienes información sobre el objeto $_REQUEST aquí: http://php.net/manual/es/reserved.variables.request.php
Saludos.
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?