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

Загрузить массив в select - Javascript

  • 772

У меня есть форма в документе HTMLс полем, selectгде я загружаю несколько провинций. Правилен ли этот способ загрузки провинций в Select? Это дает мне ошибку.

<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

    Чтобы вызвать функцию из тега HTML , вы должны сделать это внутри события ( onClick="...", onFocus="...", и т.д.). Если эту функцию нужно выполнить только один раз, рекомендую разместить ее в событииonLoad="..." тегом . <body>

    ПРИМЕЧАНИЕ.
    Вам не обязательно использовать idдля доступа к элементу в DOM , вы также можете сделать это через имя : свойство document.getElementsByName("...")[0], таким образом вы сохраните код при написании.

    Кроме того, я оставляю вам пример того
    , как добавить параметры в тег HTML <select> из массива .

    А еще полезно уметь: сортировать массив по алфавиту .

    Пример:

    //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:
    Здесь я оставляю еще один пример использования в качестве источника данных из элемента JSON вместо массива .

    //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>

    Я надеюсь, что этот пример является хорошей иллюстрацией того , как это сделать , Приветствую! ;))...

    • 6

  2. Я рекомендую вам выполнить функцию, которая будет отвечать за создание ваших элементов{opciones} после того, как документ будет готов . Я привожу вам пример, основанный на вашем коде и использующий немного jQuery :

    РЕДАКТИРОВАТЬ : поскольку вы сказали мне, что не можете использовать jQuery , вот пример с чистым 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>

    Пример с использованием 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
    }
});

    Я надеюсь, что это помогает :)

    • 3

  3. привет и удачи.

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

    Я бы начал с базовой структуры HTML : selectпустой или с первой option, которая обычно не имеет «полезного» содержания, кроме указания действия, которое необходимо выполнить. Я добавил labelтак, чтобы структура HTML была "правильной".

    Есть первый блок <script>со вспомогательными функциями, которые при необходимости можно повторно использовать для определенной цели. Я разместил их отдельно от основного скрипта, хотя их положение на странице не имеет большого значения.

    Основной скрипт требует определенной позиции, в этом случае он всегда должен располагаться ниже, selectпоскольку в противном случае строка:

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

    Он попытается загрузить элемент страницы, которого еще нет в документе.

    Что касается кода, то при загрузке окна выполняется функция, заполняющая селектор массивом переданных ему строк в порядке их выполнения:

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

    что вспомогательная функция делает косвенноloadSelector(selectNode, arrData);

    • 1

  5. Ответ очень помог мне получить представление. Теперь у меня есть проблема, что я могу вызывать эту функцию только один раз при выборе. У меня есть форма, в которой вы должны выбрать, какой клуб выиграет, поэтому я использую выбор постоянно, но это позволяет мне использовать его только один раз.

    • 0