标签：今天 append 操作 splay 选项 联网 设置 决定 created
好久没有写原生的东西了，今天写了一个小项目里面包含着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中
使用原生JavaScript实现对select增加option标签并附加value属性
标签：今天 append 操作 splay 选项 联网 设置 决定 created
原文地址：http://www.cnblogs.com/waitforyou/p/6879188.html
