Seleccionar página

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: 5.698

Espero que os sea útil.

(Visitado 28.988 veces, 11 visitas hoy)