What is a promise in Javascript?

Question

omaza1990

Asked: 2020-05-15 07:22:07 +0800 CST 2020-05-15 07:22:07 +0800 CST 2020-05-15 07:22:07 +0800 CST

在选择中加载一个数组 - 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]);
     }
}

5 Answers

Voted

fwBasic · Answer 1 · 2020-05-15T08:25:46+08:00

要从HTML标记调用函数，您必须在事件（、、等）中执行此操作。如果这个函数必须只执行一次，我建议将它放在tag的事件中。onClick="..."onFocus="..."onLoad="..." <body>

注意：
你不一定非得使用DOMid中的元素来访问，你也可以通过name : property 来访问，这样你在编写时可以节省代码。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>

已编辑：
在这里我留下另一个示例，使用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>

我希望这个例子能很好地说明：怎么做，你好！;))...

lromeraj · Answer 2 · 2020-05-15T07:41:12+08:00

我建议您在文档准备好后执行负责创建元素{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
    }
});

我希望它有帮助:)

Andres Paiva · Answer 3 · 2020-05-15T07:42:34+08:00

Andres Paiva

2020-05-15T07:42:34+08:002020-05-15T07:42:34+08:00

问候和好运。

<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

Orici · Answer 4 · 2022-08-27T03:08:11+08:00

<!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);

Enzo Marchesi · Answer 5 · 2022-08-26T10:12:08+08:00

Enzo Marchesi

2022-08-26T10:12:08+08:002022-08-26T10:12:08+08:00

答案对我有很大帮助。现在我有一个问题，我只能在选择中调用该函数一次。我有一个表格，你必须选择哪个俱乐部会获胜，所以我永久使用 select，但它只允许我使用一次。

0

在选择中加载一个数组 - Javascript

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?