将外部Javascript文件实现为html
[英]Implementation of a external Javascript file into html
问题描述
I'm working on an assignment and one of the requirements is that I use the form tag to create a list of all countries and their country code, the file was provided as an external Javascript file in an object array, I've never used an external javascript file before so I'm not sure how to access the array and put it into the form. 
我正在做作业，其中一项要求是我使用form标记创建所有国家及其国家代码的列表，该文件作为对象数组中的外部Javascript文件提供，我从未使用过之前没有外部javascript文件，所以我不确定如何访问数组并将其放入表单。
Currently this is how I my form looks: 目前，这是我的表格外观：
https://jsfiddle.net/so0z3m0v/ https://jsfiddle.net/so0z3m0v/
<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>
3 个解决方案
解决方案1
0 2015-11-25 02:51:19
What you have is an array of objects. 您拥有的是一组对象。 To access an item (object) in the array, use its index. 要访问数组中的项目（对象），请使用其索引。 Then you can access a property of that object with dot notation 然后，您可以使用点表示法访问该对象的属性
var x= countries[0].name; //Andorra
Below is a loop that will access every piece of info and place it into a select. 下面是一个循环，它将访问每条信息并将其放入选择中。
Note I have given your select element and id attribute. 注意我已经给了你选择元素和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);
}
Working Example here https://jsfiddle.net/so0z3m0v/2/ 这里的工作示例https://jsfiddle.net/so0z3m0v/2/
解决方案2
0 2015-11-25 02:54:43
You can easily access the array of external javascript like an internal one. 您可以像访问内部javascript一样轻松访问外部javascript数组。 And this is how you access and populate it to your select tag. 这就是您访问并填充到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);
});
Fiddle: https://jsfiddle.net/so0z3m0v/1/ 小提琴： https : //jsfiddle.net/so0z3m0v/1/
解决方案3
0 2015-11-25 03:01:58
Aaaand to put it all together 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.