Opciones del <select> actualizadas con JSON

Utilidad: Cuando hay que actualizar las opciones de un elemento <select> con información proveniente de la base de datos, sin recargar la página, generalmente se hace con AJAX. Pero no necesariamente debes agregar los elementos <option> desde el servidor. Puede hacerse con JavaScript, si le pasas dicha información ( en formato JSON ) al cliente, Desahogando así al servidor de esta responsabilidad.


El siguiente código es el archivo index.html, en el cual se mostrará el elemento <select>. Observe que haremos referencia a 2 archivos:

El código que actualiza el elemento <select> será invocado a partir de la función inicio() ubicada en el archivo JavaScript del mismo nombre. Esta función es invocada desde el evento onload() del elemento <body>.

index.html

 <!DOCTYPE html>
 <html>
 <head>
     <title>JavaScript & JSON</title>
     <meta http-equiv=Content-Type content="text/html; charset=UTF-8">
     <script src="inicio.js"></script>
     <script src="combo.js"></script>
 </head>
 <body onload='inicio()'>
     <h1>Ej.: Llenar Select-Option (JavaScript y JSON)...</h1>
     <select id="id_select" name="name_select"></select>
 </body>
 </html>


A continuación mostramos el contenido del archivo inicio.js y su función con el mismo nombre. Dentro invocamos a la función fillCombo() y le pasamos 4 parámetros.

  • obj: elemento <select>
  • arr: arreglo bidimencional de opciones [ ["value1", "text1"], ["valueN", "textN"]... ]
  • valor: "0" o "null"
  • texto: "Seleccione..."

Nota: Los 2 últimos parámetros son opcionales ( no aplica para los elementos <select> múltiples ).

inicio.js

 function inicio()
 {

     var arr = [
        [ "1", "ARAGUA"   ],
        [ "2", "CARABOBO" ],
        [ "3", "MIRANDA"  ]
     ];

     fillCombo( document.getElementById( "id_select" ), arr, "0", "Seleccione..." );

 }


El siguiente archivo contiene la función JavaScript que construye dinámicamente las opciones del elemento <select>.

combo.js

 function fillCombo( obj, arr, valor, texto )
 {
     //vaciar combo...
     while ( obj.options.length > 0 )
         obj.options[ obj.options.length - 1 ] = null;
     //crear opcion por defecto (n/a para select múltiple)...
     if ( valor != null && texto != null ) {
         var opcion = document.createElement( "option" );
         opcion.value = valor;
         opcion.text = texto;
         obj.options.add(opcion);
     }
     //crear grupo de opciones...
     var aOptions = [];
     var oOptGroup = document.createElement( "optgroup" );
     for ( var i = 0; i < (arr.length); i++ ) {
         aOptions[i] = document.createElement( "option" );
         aOptions[i].value = arr[i][0];
         aOptions[i].text = arr[i][1];
         //Para opciones con etiquetas...
         if ( arr[i][2] != undefined )
             aOptions[i].label = arr[i][2];
         oOptGroup.appendChild( aOptions[i] );
     }	
     //colocar grupo de opciones en el elemento select...
     obj.innerHTML += oOptGroup.innerHTML;
 }


He aquí el ejemplo:


Tool developed at revolution, under free software. Copyleft 2017.