Load an array in select - Javascript

Question

Load an array in select - Javascript

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

1

I have a form in a document HTML with a field select where I charge several provinces. Is this way to load the provinces in the Select correct? I get an 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]);
     }
}

javascript select

asked by omaza1990 14.05.2017 в 17:22

source

3 answers

1

Greetings and luck.

<select name="provincia" id="provincia"></select>
    <script type="text/javascript">
        function cargar_provincias()
        {
            var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];
            for(var i in array)
            { 
                document.getElementById("provincia").innerHTML += "<option value='"+array[i]+"'>"+array[i]+"</option>"; 

            }
    }

    cargar_provincias();

    </script>

answered by 14.05.2017 в 17:42

1

What I recommend is that you execute the function that will be responsible for creating your elements {opciones} once the document is ready , I'll give you the example based on your code and using a little jQuery :

EDIT : As you told me you can not use jQuery here I leave you a example with pure JavaScript :

function cargar() {
    var provincias = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"]; //Tu array de provincias
    var select = document.getElementById("provincias"); //Seleccionamos el select
    
    for(var i=0; i < provincias.length; i++){ 
        var option = document.createElement("option"); //Creamos la opcion
        option.innerHTML = provincias[i]; //Metemos el texto en la opción
        select.appendChild(option); //Metemos la opción en el select
    }
}
cargar();

<select id="provincias"></select>

The example using jQuery:

HTML :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="provincias"></select>

JavaScript + jQuery :

$(document).ready(function() {
   var provincias = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];

    for(var i=0; i < provincias.length; i++){ 
        var option = document.createElement("option"); //Creas el elemento opción
        $(option).html(provincias[i]); //Escribes en él el nombre de la provincia
        $(option).appendTo("#provincias"); //Lo metes en el select con id provincias
    }
});

I hope it helps you:)

answered by 14.05.2017 в 17:41

+ = does not work for me inside a Loop for of Capture the name of the select in HTML and JQuery

score 2 · Accepted Answer

To invoke a function from a tag HTML you must do it within a event ( onClick="..." , onFocus="..." , etc.). If this function should be executed only once, I recommend placing it in the event onLoad="..." of the tag <body> .

NOTE:
  You do not necessarily have to use id to access an element in the DOM , you can also do it through the property name : document.getElementsByName("...")[0] , this way you save code when writing.

Additionally I leave you an example of:
  how to add options to a tag HTML <select> from an array .

And it is also useful to know how to: sort the array alphabetically .

Example:

//Codigo a Ejecutar al Cargar la Pagina
function myOnLoad() {
 cargar_provincias()
}

// funcion para Cargar Provincias al campo <select>
function cargar_provincias() {
 var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];

 // Ordena el Array Alfabeticamente, es muy facil ;)):
 array.sort();

 addOptions("provincia", array);
}

// Rutina para agregar opciones a un <select>
function addOptions(domElement, array) {
 var select = document.getElementsByName(domElement)[0];

 for (value in array) {
  var option = document.createElement("option");
  option.text = array[value];
  select.add(option);
 }
}

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

I hope this example is a good illustration of: how to do it , Greetings !! ;)) ...