javascript - 如何使用 html dom 创建国家/地区列表的对象数组？

Question

现在已经被这个问题困扰了一段时间了。任何帮助将不胜感激。

我正在为我的网站制作一个带有国家/地区选项的选择元素。我有一个包含 2 个对象数组国家/地区列表的 javascript 文件(我无法在 html 文件中指定选项，只能使用此 js 文件):

var country_list = [
{"country_code": "CA", "country_name": "Canada"},
{"country_code": "UK", "country_name": "United Kingdom"},
{"country_code": "AU", "country_name": "Australia"},
{"country_code": "NZ", "country_name": "New Zealand"} ];

然后这是我的 html 文件:

<form name="form1">    
Country <select value="country_code" onclick="select_country()"></select>
</form>

国家/地区名称必须显示在下拉列表中，而选项值将为 2 个字母的国家/地区代码。另外，必须默认选择澳大利亚。

这是我到目前为止所做的事情:

function select_country(){
var select = document.form1.createElement("SELECT");
select.setAttribute("id","mySelect");
document.form1.body.appendChild(select);
var option = document.form1.createElement("option");
option.setAttribute("value", "Canada");
var text = document.createTextNode("CAN");
option.appendChild(text);
document.form1.getElementById("mySelect").appendChild(option);
}

Answer 1

您可以使用 vanilla js 轻松完成此操作:

var selectElem = document.createElement("select");
for (var i = 0; i < country_list.length; i++) {
    var option = document.createElement("option");
    option.text = country_list[i].country_name;
    option.value = country_list[i].country_code;

    if (option.text == "Australia") option.selected = true; //default option
    selectElem.appendChild(option);
}

document.form1.body.appendChild(selectElem);