好久没有写原生的东西了,今天写了一个小项目里面包含着option选项,所以我决定使用原生JavaScript动态生成,
本着互联网分享精神,我将本篇文章分享给大家。
html代码(就是一个select)
<select name="" id="reg-select"></select>
json数据
var json = [
{
"cc": "86",
"code": "CN",
"desc": "中国大陆"
},
{
"cc": "852",
"code": "HK",
"desc": "香港"
},
{
"cc": "853",
"code": "MO",
"desc": "澳门"
},
{
"cc": "886",
"code": "TW",
"desc": "台湾"
},
{
"cc": "60",
"code": "MY",
"desc": "马来西亚"
},
{
"cc": "63",
"code": "PH",
"desc": "菲律宾"
},
{
"cc": "65",
"code": "SG",
"desc": "新加坡"
},
{
"cc": "66",
"code": "TH",
"desc": "泰国"
},
{
"cc": "81",
"code": "JP",
"desc": "日本"
},
{
"cc": "82",
"code": "KR",
"desc": "韩国"
},
{
"cc": "91",
"code": "IN",
"desc": "印度"
},
{
"cc": "7",
"code": "RU",
"desc": "俄罗斯"
},
{
"cc": "30",
"code": "GR",
"desc": "希腊"
},
{
"cc": "31",
"code": "NL",
"desc": "荷兰"
},
{
"cc": "34",
"code": "ES",
"desc": "西班牙"
},
{
"cc": "41",
"code": "CH",
"desc": "瑞士"
},
{
"cc": "45",
"code": "DK",
"desc": "丹麦"
},
{
"cc": "46",
"code": "SE",
"desc": "瑞典"
},
{
"cc": "47",
"code": "NO",
"desc": "挪威"
},
{
"cc": "351",
"code": "PT",
"desc": "葡萄牙"
},
{
"cc": "61",
"code": "AU",
"desc": "澳大利亚"
},
{
"cc": "64",
"code": "NZ",
"desc": "新西兰"
},
{
"cc": "1",
"code": "US",
"desc": "美国"
},
{
"cc": "1",
"code": "CA",
"desc": "加拿大"
},
{
"cc": "44",
"code": "GB",
"desc": "英国"
},
{
"cc": "49",
"code": "DE",
"desc": "德国"
},
{
"cc": "39",
"code": "IT",
"desc": "意大利"
},
{
"cc": "33",
"code": "FR",
"desc": "法国"
},
{
"cc": "52",
"code": "MX",
"desc": "墨西哥"
},
{
"cc": "54",
"code": "AR",
"desc": "阿根廷"
},
{
"cc": "55",
"code": "BR",
"desc": "巴西"
}
];
JavaScript代码
var reg_select = document.getElementById('reg-select'); //找到select标签
var frag = document.createDocumentFragment(); //创建文档片段,文档片段的作用就是让for循环中创建的标签先放到文档片段中,待for循环结束后直接将文档片段插入制定的标签元素内,可以减少dom的操作
for (var i = 0; i < json.length; i++) {
var option = document.createElement("option"); //创建option标签
option.value = [i]; //设置正在创建的option的value属性
option.innerHTML = json[i].desc + " " + "(" + "+" + json[i].cc + ")";
frag.appendChild(option); //将设置好的 option插入文档片段。
}
reg_select.appendChild(frag); //循环结束后一次性,将文档片段插入制定的dom中