Implementation of a external Javascript file into html
Question
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.
Currently this is how I my form looks:
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 answers
solution1
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.
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/
solution2
0 2015-11-25 02:54:43
You can easily access the array of external javascript like an internal one. And this is how you access and populate it to your select tag.
// 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/
solution3
0 2015-11-25 03:01:58
Aaaand to put it all together
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.