BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Rellenar un select con datos obtenidos remotamente en json vía jQuery

16/MAY/2013 36.944 visitas Ver comentarios
Rellenar un select con datos obtenidos remotamente en json vía jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Volvemos a jQuery y esta vez lo hacemos con un poco de PHP y JSON. Lo que vamos a hacer es rellenar un SELECT (o lista desplegable) con opciones cargadas remotamente mediante JSON.

Para ello, nos vamos a valer de 3 elementos. Un formulario -con un botón para cargar el contenido-, un poco de javascript para hacer la carga de opciones y un PHP que devolverá un array convertido en una cadena JSON.

Tú me dirás, pero a quién se le ocurre cargar las opciones de un select presionando un botón y yo te diré... a nadie, pero la idea es hacer lo que se podría traer automáticamente mediante la interacción de tu click, más que nada, para que veas lo que está pasando.

De entrada, tendremos un SELECT vacío, con una única OPTION que será el Selecciona... y más abajo 2 botones, uno que hará la carga de valores y el otro que pondrá el SELECT en su estado original.

Mediante un poquito de javascript, el botón llamará a un PHP remoto, el cual le devolverá una cadena convertida en JSON utilizando la función json_encode de PHP y cuyo contenido original no deja de ser un simple array (como se ve en la demo y en uno de los códigos aquí abajo.

Luego, recibiremos los valores y los procesaremos, separando las diferentes partes de cada elemento de nuestro array. Traduciendo... la cadena json, se volverá a convertir en un array en javascript, lo recorreremos y por cada elemento, generaremos una nueva OPTION en nuestro SELECT.

Sé que me explico fatal, espero que me entiendas, si miras la demo verás que es super sencilla y comprobarás lo que te digo (que soy horrible explicándome).

Comentario extra
Si quiseras cargar el contenido automáticamente, sólo basta con quitar la interacción del CLICK en el primer javascript y se ejecutará en el DOCUMENT READY.

Código 1 - HTML
<form class="validacion" action="" method="post">
<fieldset>
<p><label>Selecciona un país</label><select name="pais" id="pais"><option value="">Selecciona...</option></select></p>
</fieldset>
<p><input type="button" value="Cargar datos en el select" class="cargar"><input type="button" value="Reiniciar select" class="reiniciar"></p>
</form>
Código 2 - JAVASCRIPT
$(document).ready(function()
	{
		$(".cargar").bind("click",function()
		{
			var miselect=$("#pais");
			/* VACIAMOS EL SELECT Y PONEMOS UNA OPCION QUE DIGA CARGANDO... */
			miselect.find('option').remove().end().append('').val('');
			
			$.post("carga_json.php",
				function(data) {
					miselect.empty();
					for (var i=0; i' + data[i].literal + '');
					}
			}, "json");
		});
		$(".reiniciar").bind("click",function()
		{
			var miselect=$("#pais");
			miselect.find('option').remove().end().append('').val('');
		});
	});
Código 3 - PHP
$datos=array(
	0=>array("id"=>1,"literal"=>"Argentina"),
	1=>array("id"=>2,"literal"=>"Brasil"),
	2=>array("id"=>3,"literal"=>"Chile"),
	3=>array("id"=>4,"literal"=>"España"),
	4=>array("id"=>5,"literal"=>"Francia"),
	5=>array("id"=>6,"literal"=>"Portugal")
);
echo json_encode($datos);

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018