好久沒有寫原生的東西了，今天寫了一個小項目裏面包含著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 + "&nbsp" + "(" + "+" + json[i].cc + ")";
        frag.appendChild(option);   //將設置好的 option插入文檔片段。
    }
    reg_select.appendChild(frag);  //循環結束後一次性，將文檔片段插入制定的dom中

使用原生JavaScript實現對select增加option標簽並附加value屬性