首页 > 代码库 > 使用原生JavaScript实现对select增加option标签并附加value属性
使用原生JavaScript实现对select增加option标签并附加value属性
好久没有写原生的东西了,今天写了一个小项目里面包含着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 = http://www.mamicode.com/[i]; //设置正在创建的option的value属性 option.innerHTML = json[i].desc + " " + "(" + "+" + json[i].cc + ")"; frag.appendChild(option); //将设置好的 option插入文档片段。 } reg_select.appendChild(frag); //循环结束后一次性,将文档片段插入制定的dom中
使用原生JavaScript实现对select增加option标签并附加value属性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。