Question

我正在进行一项任务，其中一项要求是我使用表单标签创建所有国家/地区代码的列表，该文件作为对象数组中的外部Javascript文件提供，我'之前从未使用过外部javascript文件，因此我不确定如何访问数组并将其放入表单中。

目前我的表单看起来就像这样：

<head>
    <script src="myscripts.js"></script>
</head>

<body>
    <form id="register" action="http://formpost.azurewebsites.net/home/test" method="post">

    Country * <select name="country" form="register">
        <option value="CA">Canada</option><br><br>
    </select><br><br>

    <input type="submit" value="submit">

</body>

Answer 1

你拥有的是一系列物体。要访问数组中的项（对象），请使用其索引。然后，您可以使用点符号

访问该对象的属性

var x= countries[0].name; //Andorra

下面是一个循环，它将访问每一条信息并将其放入选择中注意我已经给出了select元素和id属性。

var ddlCountry = document.getElementById('ddlCountry');
     for(var i=0;i<countries.length;i++)
        {
        var country = countries[i];
        var name=country.name;
       var node = document.createElement("OPTION");                
        var textnode = document.createTextNode(name);
        node.appendChild(textnode);                  
        ddlCountry.appendChild(node);
        }

此处的工作示例https://jsfiddle.net/so0z3m0v/2/

Answer 2

您可以轻松访问外部JavaScript的数组，如内部JavaScript。这就是您访问和填充select代码的方式。

// To clear the select options
var select = document.getElementById("country");
var length = select.options.length;
for (i = 0; i < length; i++) {
  select.options[i] = null;
}

// Iterate your array and set it as new option in the select
countries.forEach(function(elem, index){
    select.options[index] = new Option(elem.name, elem.code);
});

小提琴：https://jsfiddle.net/so0z3m0v/1/

Answer 3

Aaaand把它们放在一起

<head>
    <script  src="myscripts.js"></script>
</head>

<body>
    <form id="register" action="http://formpost.azurewebsites.net/home/test" method="post">

    Country * <select name="country" form="register">
        <option value="CA">Canada</option><br><br>
    </select><br><br>

    <input type="submit" value="submit">
    <script type="text/javascript">
// put it down here because the HTML must be loaded completely

// make a generic option node
var option = document.createElement("option");
// find the "select" element by it's name
var select = document.getElementsByName("country")[0];
// over the whole countries array
for(var i = 0; i < countries.length;i++){
    // make a copy of the generic option element build above
    // and append it to the end of the select element
    select.appendChild(option.cloneNode());
    // set the value of the option element to the code
    select.lastChild.value = countries[i].code;
    // set the text to the name of the country
    select.lastChild.textContent = countries[i].name;
}
    </script>
</body>

将外部Javascript文件实现到html中

3 个答案: