使用原生JavaScript实现对select增加option标签并附加value属性

Posted 2020-09-19 铅笔画不出的黑白

好久没有写原生的东西了，今天写了一个小项目里面包含着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": "巴西"
        }
    ];

View Code

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 + "&nbsp" + "(" + "+" + json[i].cc + ")";
        frag.appendChild(option);   //将设置好的 option插入文档片段。
    }
    reg_select.appendChild(frag);  //循环结束后一次性，将文档片段插入制定的dom中