使用原生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": "巴西"
        }
    ];

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中