mysql_* retiradas desde PHP 7) se ha migrado a PDO con consultas preparadas, se ha añadido una versión con JavaScript vanilla (fetch + async/await) sin jQuery, una demo interactiva que puedes probar aquí mismo y un ZIP renovado listo para desplegar. Los ejemplos siguen la misma lógica que la versión de 2015, así que si ya conocías el post te resultará familiar.
En este tutorial vas a aprender tres formas de cargar dinámicamente un campo desplegable <select> de HTML con datos desde el servidor:
- Con jQuery + AJAX, insertando directamente HTML.
- Con jQuery + JSON, para selects encadenados (país → región).
- Con JavaScript vanilla usando
fetch()yasync/await, sin ninguna librería.
En todos los casos el backend en PHP consulta una base de datos MySQL con PDO y consultas preparadas para evitar inyección SQL y devuelve los datos al frontend.
Al final del artículo tienes una demo interactiva y el código descargable actualizado.
Qué vamos a construir
Un formulario con dos selects encadenados:
- El primer select se rellena al cargar la página con la lista de países.
- Cuando el usuario elige un país, el segundo select se rellena automáticamente con las regiones de ese país.
Es el patrón clásico de select dependiente o dropdown en cascada, útil para formularios de dirección, filtros de búsqueda o cualquier caso donde una elección condicione la siguiente.
Estructura de la base de datos
Vamos a trabajar con dos tablas MySQL sencillas:
CREATE TABLE paises (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
CREATE TABLE regiones (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(80) NOT NULL,
id_pais INT UNSIGNED NOT NULL,
INDEX idx_pais (id_pais)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;Fíjate en utf8mb4 como charset: es la recomendación actual porque soporta correctamente acentos, eñes y emojis. En el ZIP descargable tienes un paises.sql con la estructura y datos de ejemplo listos para importar en phpMyAdmin.
Conexión a la base de datos con PDO
Creamos un archivo db.php que centralice la conexión. Lo incluiremos desde los webservices:
<?php
// db.php - Conexión centralizada con PDO
$host = 'localhost';
$db = 'nombrebasededatos';
$user = 'usuariobbdd';
$pass = 'password';
$charset = 'utf8mb4';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (PDOException $e) {
http_response_code(500);
exit('Error de conexión con la base de datos.');
}Con esto tenemos una conexión reutilizable, con excepciones activadas y sin emulación de prepared statements (más seguro).
Ejemplo 1: jQuery + AJAX cargando HTML
El primer select se rellena en cuanto la página carga.
HTML:
<div class="selector-pais">
<label>Elige un país</label>
<select></select>
</div>JavaScript (jQuery):
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'getPaises.php',
success: function (response) {
$('.selector-pais select').html(response).fadeIn();
},
error: function () {
$('.selector-pais select').html('<option>Error al cargar</option>');
}
});
});Webservice PHP (getPaises.php):
<?php
require __DIR__ . '/db.php';
header('Content-Type: text/html; charset=utf-8');
$stmt = $pdo->query('SELECT id, nombre FROM paises ORDER BY nombre');
echo '<option value="0">Seleccionar</option>';
foreach ($stmt as $fila) {
printf(
'<option value="%d">%s</option>',
(int) $fila['id'],
htmlspecialchars($fila['nombre'], ENT_QUOTES, 'UTF-8')
);
}Qué ha cambiado respecto a la versión de 2015:
mysql_*→ PDO.- Salida escapada con
htmlspecialchars()para evitar XSS. idcasteado a entero antes de imprimirlo.- Cabecera
Content-Typeexplícita con charset UTF-8. errorhandler en la llamada AJAX.
Ejemplo 2: jQuery + JSON para selects encadenados
Cuando el usuario cambia el país, cargamos sus regiones desde otro webservice que devuelve JSON.
HTML:
<div class="con-json">
<label>Regiones</label>
<select disabled><option>Elige un país primero</option></select>
</div>JavaScript (jQuery):
$(document).ready(function () {
$('.selector-pais select').on('change', function () {
var pais = $(this).val();
var $regiones = $('.con-json select');
$regiones.prop('disabled', true).empty()
.append('<option>Cargando…</option>');
$.getJSON('getRegionesJson.php', { pais: pais }, function (data) {
$regiones.empty()
.append('<option value="0">Seleccionar</option>');
$.each(data, function (id, nombre) {
$regiones.append(
$('<option>').val(id).text(nombre)
);
});
$regiones.prop('disabled', false);
}).fail(function () {
$regiones.empty().append('<option>Error al cargar</option>');
});
});
});Fíjate en dos detalles importantes:
$('<option>').val(id).text(nombre)en lugar de concatenar strings. jQuery escapa el texto automáticamente, lo que evita XSS si el nombre de la región contiene caracteres HTML.- Estado
disabledy mensaje «Cargando…» para dar feedback al usuario mientras dura la petición (UX).
Webservice PHP (getRegionesJson.php):
<?php
require __DIR__ . '/db.php';
header('Content-Type: application/json; charset=utf-8');
$pais = filter_input(INPUT_GET, 'pais', FILTER_VALIDATE_INT);
if ($pais === false || $pais === null || $pais <= 0) {
echo json_encode([]);
exit;
}
$stmt = $pdo->prepare(
'SELECT id, nombre FROM regiones WHERE id_pais = :pais ORDER BY nombre'
);
$stmt->execute([':pais' => $pais]);
$regiones = [];
foreach ($stmt as $fila) {
$regiones[(int) $fila['id']] = $fila['nombre'];
}
echo json_encode($regiones, JSON_UNESCAPED_UNICODE);Cambios críticos respecto a 2015:
filter_input(..., FILTER_VALIDATE_INT)valida quepaissea un entero antes de usarlo.- Consulta preparada con
:pais: el valor nunca se concatena al SQL, cerrando por completo la puerta a la inyección SQL. Content-Type: application/jsonpara que el navegador lo interprete correctamente.JSON_UNESCAPED_UNICODEpara que los acentos y la ñ salgan tal cual, sin escapes tipo\u00f1.
Ejemplo 3: la misma solución sin jQuery (vanilla JS)
Si empiezas un proyecto nuevo hoy en 2026, probablemente no necesites jQuery. Aquí tienes la misma funcionalidad con fetch() y async/await:
document.addEventListener('DOMContentLoaded', async () => {
const paisSelect = document.querySelector('.selector-pais select');
const regionSelect = document.querySelector('.con-json select');
// 1. Cargar países al iniciar
try {
const res = await fetch('getPaises.php');
const html = await res.text();
paisSelect.innerHTML = html;
} catch (err) {
paisSelect.innerHTML = '<option>Error al cargar</option>';
}
// 2. Al cambiar de país, cargar regiones
paisSelect.addEventListener('change', async () => {
const pais = paisSelect.value;
regionSelect.disabled = true;
regionSelect.innerHTML = '<option>Cargando…</option>';
try {
const res = await fetch(`getRegionesJson.php?pais=${encodeURIComponent(pais)}`);
const data = await res.json();
regionSelect.innerHTML = '<option value="0">Seleccionar</option>';
for (const [id, nombre] of Object.entries(data)) {
const opt = document.createElement('option');
opt.value = id;
opt.textContent = nombre; // .textContent escapa automáticamente
regionSelect.appendChild(opt);
}
regionSelect.disabled = false;
} catch (err) {
regionSelect.innerHTML = '<option>Error al cargar</option>';
}
});
});Los webservices PHP son exactamente los mismos. Solo cambia el frontend. Ventajas: sin dependencias, más rápido en descargar, sintaxis moderna con async/await.
Demo interactiva
Prueba el patrón sin salir del artículo. La demo usa datos embebidos (sin backend), así ves el comportamiento en tiempo real:
Selects encadenados: País → Región
—
Datos embebidos en JavaScript (sin backend) para que la demo funcione en cualquier navegador. En producción, los datos vendrían del webservice PHP.
Descargar el código completo
En el ZIP encontrarás:
db.php— conexión PDO reutilizable.getPaises.php— webservice del primer select.getRegionesJson.php— webservice del segundo select con JSON.index.html— demo con jQuery apuntando a los webservices.paises.sql— estructura de las tablas y datos de ejemplo (países y regiones de Europa y América Latina).README.md— instrucciones de instalación paso a paso.
Descargas realizadas: 6.867
Preguntas frecuentes
¿Por qué no funciona el código original con mysql_connect?
Porque las funciones mysql_* están oficialmente eliminadas desde PHP 7.0, publicado en diciembre de 2015. Cualquier hosting moderno usa PHP 7.4, 8.0, 8.1 o superior, donde esas funciones ya no existen. La versión actualizada usa PDO, que es la API recomendada y funciona en todas las versiones actuales de PHP.
¿Cómo evito la inyección SQL en el segundo select?
Nunca concatenes el valor recibido al SQL. Usa consultas preparadas con parámetros nombrados (:pais) y valida el tipo del dato antes con filter_input(INPUT_GET, 'pais', FILTER_VALIDATE_INT). Con eso, aunque un atacante envíe ?pais=1; DROP TABLE regiones, el valor se rechaza porque no es un entero válido.
Los acentos y la ñ salen como símbolos raros, ¿cómo lo arreglo?
Es un problema de codificación. Asegúrate de tres cosas: 1) que la tabla MySQL use utf8mb4, 2) que el archivo PHP se guarde como UTF-8 sin BOM, y 3) que el webservice envíe header('Content-Type: application/json; charset=utf-8') y use JSON_UNESCAPED_UNICODE al codificar.
¿Cómo hago un tercer select en cascada (país → región → ciudad)?
Aplica la misma lógica: crea un webservice getCiudadesJson.php que reciba ?region=X, y añade un tercer change listener en el segundo select apuntando al tercer select. Cada select depende del anterior siguiendo el mismo patrón.
¿Cómo marco una opción como seleccionada al editar un registro?
Después de rellenar el select con los datos, ejecuta $('.con-json select').val(idGuardado). Si el valor no existe todavía cuando cargas la página, hazlo dentro del callback success o después del await fetch, para asegurarte de que las opciones ya están en el DOM.
¿Puedo usar esto sin base de datos MySQL?
Sí. Sustituye la consulta PDO por un array PHP con los datos (o un archivo JSON estático) y el resto del código funciona igual. Para prototipos rápidos también puedes servir directamente un .json desde el servidor y llamarlo con fetch('paises.json').
¿Cómo envío datos adicionales por POST al webservice?
En jQuery, añade la propiedad data a $.ajax: data: { id: $('#miInput').val() }. Recíbelo en PHP con filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT) y úsalo como parámetro en la consulta preparada.
Changelog
- 2026-11 – Migración completa a PDO con prepared statements. Corregida vulnerabilidad de inyección SQL. Añadida versión con JavaScript vanilla + fetch. Nueva demo interactiva. Nuevo ZIP descargable con datos de ejemplo.
- 2015-08 – Publicación original con
mysql_*y jQuery.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
Especialista en Diseño y Desarrollo Web para Startups, PYMEs y Proyectos Personales | Experto en WordPress & Optimización SEO | Ayudo a autónomos y PYMEs a crecer su negocio.
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` (
`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 ;
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.
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?
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
Excelente, justo lo que buscaba, solo que al descargarlo me dice que no tengo acceso al sitio
Hola massimo_oddo,
Acabo de revisarlo y ya lo he solucionado, prueba ahora.
Saludos.
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
Hola Nyx Ponce,
Utilizando la misma lógica, ¿cual es la dificultad que te encuentras?
que tal y como pueod mandar el contenido de un input text para que la consulta que hace de los paises sea dinamica
Hola Roberto,
Pues sería muy similar:
$(«.clase-del-input-text»).change(function() {
$(«.con-json select»).empty();
$.getJSON(‘getRegionesJson.php?pais=’+$(«.clase-del-input-text»).val(),function(data){
$.each(data, function(id,value){
$(«.con-json select»).append(‘‘);
});
});
Buen dia, me encontre con este proyecto y me parecio bastante interesante. Lo quise aplicar en un proyecto en el cual estoy trabajando. Lo pueden ver aqui http://adsistemas.net.co/medic_sas/ap/ordendeservicio.php
pero no me funciona. Lo que pretendo es que cuando cambia el valor en el campo con id=»nombre_razonsocial», tome el valor del text con id=»cedula_nit» y llene el select con la respuesta que devuelve el webservice PHP.
Gracias por su ayuda y colaboracion. Muchas gracias
Este es el codigo en un archivo php …
//cambia (change) el valor en nombre_razonsocial//
$(document).ready(function() {
$(‘#nombre_razonsocial’).change(function(){
var ccliente = document.getElementById(‘cedula_nit’).value;
var dataString = ‘ccliente=’+ccliente;
$.ajax({
type: «POST»,
url: «despliega_sucursales.php»,
data: dataString,
success: function(response)
{
$(‘.selector-sucursal select’).html(response).fadeIn();
}
});
});
});
Este es mi webservice PHP …
<?php
//Tabla sedes/sucursales
$cliente_consucursal=$_REQUEST["ccliente"];
$query_regsedesysucursales = "SELECT * FROM tblsedesysucursales WHERE cedula_nit='".$cliente_consucursal."'";
$regsedesysucursales = mysql_query($query_regsedesysucursales, $cnxmedic_sas) or die(mysql_error());
$row_regsedesysucursales = mysql_fetch_assoc($regsedesysucursales);
do {
echo '’.$row_regsedesysucursales[‘nombre_razonsocial_sede’].»;
} while ($row_regsedesysucursales = mysql_fetch_assoc($regsedesysucursales));
?>
Hola Raul,
Lo primero que hay que saber es si te está devolviendo algo el servicio. Si en el success, justo antes de esta linea:
$(‘.selector-sucursal select’).html(response).fadeIn();
Le pones un console.log(response); podrás verlo en consola, o con un alert(response); te lo pondrá en una ventana alert
comprueba que lo que te devuelva es correcto, creo que le estás insertando el valor sólo dentro del html del select. si lo pones así deberías ponerle cada elemento dentro de un option:Espero que sirva.
Saludos.
amigo no me funciona la parte con json, ayuda!!!, y tmbn como se podria implementar otro list para dsitritos??
Hola Anthony,
En el ejemplo sí funciona. para implementar distritos tendrías que seguir la misma lógica con otro select. Deberías compartir el código para ver qué falla.
Saludos.
Y si es para PostgreSQL que extraere los datos será lo mismo???
Hola Elmer,
Para extraer los datos de otra base de datos debería bastar cambiar la conexión a la base de datos y tener creadas las tablas correctamente.
Saludos.
Hola, excelente aporte !!
Lo implementé sin problema sol oque tengo un inconveniente que es el siguiente:
Habilito un segundo select con la seleccion del primero
Elijo una opcion de este segundo select y guardo el registro
Al traer el registro, para edición, si bien el dato está guardado en el campo, no logro mostrarlo porque el select no se carga hasta que vuelva a cargarse, cómo podría resolverlo ?
Saludos y desde ya muchas gracias por la ayuda !
Buenas tardes Daniel,
Supongo que tendrías que hacerle una primera asignación de un valor único, el seleccionado en el select.
Excelente mi estimado. Me ha funcionado al «full». Una última, de qué sitio web tuviste los datos de los países con sus respectivas entidades o provincias? Gracias.
Genial Ángel. Lo de los países los recolecté por internet