Cargar un array en select – Javascript

publicado por: Anonymous

Tengo un formulario en un documento HTML con un campo select donde cargo varias provincias.
¿Es correcta esta forma de cargar las provincias en el Select? Me da error.

<select name="provincia" id="provincia">
    <option value="cargar_provincias();">Seleccione una Provincia...
</select>

function cargar_provincias(){
    var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];
    var provincia = document.getElementById("provincia");
    for(var i=0;i<array.length;i++){ 
        provincia.options[i] = new option(array[i]);
     }
}

solución

Para invocar una función desde un tag HTML debes hacerlo dentro de un evento (onClick="...", onFocus="...", etc.). Si dicha función se debe ejecutar una sola vez te recomiendo colocarla en el evento onLoad="..." del tag <body>.

NOTA:
No necesariamente tienes que usar id para accesar un elemento en el DOM, puedes también hacerlo a través de la propiedad name: document.getElementsByName("...")[0], de esta forma te ahorras codigo al escribir.

Adicionalmente te dejo un ejemplo de:
como agregar opciones a un tag HTML <select> desde un array.

Y también es útil saber como: ordenar el array alfabeticamente.

Ejemplo:

_x000D_

_x000D_

//Codigo a Ejecutar al Cargar la Pagina_x000D_
function myOnLoad() {_x000D_
 cargar_provincias()_x000D_
}_x000D_
_x000D_
// funcion para Cargar Provincias al campo <select>_x000D_
function cargar_provincias() {_x000D_
 var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];_x000D_
_x000D_
 // Ordena el Array Alfabeticamente, es muy facil ;)):_x000D_
 array.sort();_x000D_
_x000D_
 addOptions("provincia", array);_x000D_
}_x000D_
_x000D_
// Rutina para agregar opciones a un <select>_x000D_
function addOptions(domElement, array) {_x000D_
 var select = document.getElementsByName(domElement)[0];_x000D_
_x000D_
 for (value in array) {_x000D_
  var option = document.createElement("option");_x000D_
  option.text = array[value];_x000D_
  select.add(option);_x000D_
 }_x000D_
}

_x000D_

<body onLoad="myOnLoad()">_x000D_
 <select name="provincia">_x000D_
  <option>Seleccione una Provincia...</option>_x000D_
 </select>_x000D_
</body>

_x000D_

_x000D_

_x000D_

Espero este ejemplo sea una buena ilustración del: como hacerlo, Saludos!! ;))…

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *