Home / Questions / 69836
Accepted
omaza1990
Asked: 2020-05-15 07:22:07 +0800 CST 2020-05-15 07:22:07 +0800 CST

Load an array in select - Javascript

  • 772

I have a form in a document HTMLwith a field selectwhere I load several provinces. Is this way of loading the provinces in the Select correct? It gives me 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

5 Answers

  1. Best Answer

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

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

    Additionally, I leave you an example of:
    how to add options to an HTML tag <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>

    EDITED:
    Here I leave another example using as a source of data from a JSON element instead of an array

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

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

 addOptions("provincia", json);
}

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

 Object.keys(json).forEach(function(elm) {
  var option = document.createElement("option");
  option.text = elm;
  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! ;))...

    • 6

  2. What I recommend is that you execute the function that will be in charge of creating your elements{opciones} once the document is ready , I give you the example based on your code and using a bit of jQuery :

    EDIT : since you told me that you can't use jQuery , here's an 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 :)

    • 3

  3. greetings and good 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>
    • 3 

  4. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .center-content {
            text-align: center;
        }
        .pad-2 {
            padding: 2%;
        }
        .pad-10 {
            padding: 10%;
        }
        .wmx-30 {
            max-width: 300px;
        }
    </style>
    <script>
        // Aux. func.
        // Wrap for document.querySelector()
        function qs(nodeSelector, node = null) // js node | null
        {
            node = (node !== null && node.nodeType !== 1) ? null : node;

            return (node || document).querySelector(nodeSelector);
        }

        // Func to populate a select
        function loadSelector(selectNode, arrData) // void
        {
            console.log('@loadSelector');
            if (!selectNode || selectNode.nodeType !== 1) {
                console.error('No se ha cargado el nodo "select"');
                return;
            }
            selectNode = resetSelector(selectNode);

            for (let i = 0; i < arrData.length; i++) {
                const fakeRegionValue = i + 1;
                const regionName = arrData[i];

                const optionNode = composeOption(fakeRegionValue, regionName);
                selectNode.appendChild(optionNode);
            }

            function composeOption(optionValue, optionText) // js node
            {
                const option = document.createElement('option');
                const optionContent = document.createTextNode(optionText);

                option.appendChild(optionContent);
                option.setAttribute('value', optionValue);

                return option;
            }

            function resetSelector(selectNode) // js node
            {
                const firstOption = qs('option', selectNode);
                selectNode.innerHTML = null;
                selectNode.appendChild(firstOption);

                return selectNode;
            }
        }
    </script>
</head>
<body class="pad-10 center-content">
    <label for="provincia">Seleccione una Provincia</label>
    <select name="provincia" id="provincia" class="pad-2 wmx-30">
        <option value="0">Seleccionar...</option>
    </select>

    <script>
////////////////////////////////////////////////////////////////
        // Script functions

        function loadOnNaturalOrder(selectNode, arrData) // void
        {
            console.log('@loadOnNaturalOrder');

            loadSelector(selectNode, arrData);
        }


        ////////////////////////////////////////////////////////////////
        // Run script

        const arrData = [
            "Cantabria",
            "Asturias",
            "Galicia",
            "Andalucia",
            "Extremadura"
        ];

        const selectNode = qs('select#provincia');

        window.onload = () => {
            loadOnNaturalOrder(selectNode, arrData);
        }
    </script>
</body>
</html>

    I would start from the HTML base structure : the selectempty or with the first option, which does not usually have a "useful" content beyond indicating the action to be carried out. I've added a labelso that the HTML structure is "correct".

    There is a first block <script>with helper functions, which can be reused for a certain purpose when needed. I have placed them separate from the main script although their position on the page doesn't matter too much.

    The main script does require a certain position, in this case it must always be placed below the selectsince otherwise the line:

    const selectNode = qs('select#provincia');

    It would try to load a page element that is not yet in the document.

    As for the code, when the window is loaded, the function that fills the selector with the array of strings that is passed to it in the order in which they are executed is executed:

    window.onload = () => {
    loadOnNaturalOrder(selectNode, arrData);
}

    what the helper function does indirectlyloadSelector(selectNode, arrData);

    • 1

  5. The answer helped me a lot to get an idea. Now I have a problem that I can only call that function once in a select. I have a form where you have to select which club is going to win, so I use select permanently, but it lets me use it only once.

    • 0