利用JS 增加 HTML select 标签 的option 可以使用 add() 添加到最后面 有啥办法可以使添加到最前面吗？

Posted 2023-04-30

参考技术A var objSelect=document.getElementById("select的id");
objSelect.options.add( new Option(txt, val));追问

貌似你的这个就是添加到最后吧！ 我要添加在最前面！！！！

追答

objSelect.options.add(new Option("x", "0"),1);
1为索引值，要添加到最前面的话把1改成0

追问

问题是我的1已经有值了

追答

objSelect.options.add(new Option(txt, val),0); 就是加到最前面额

本回答被提问者和网友采纳 参考技术B 利用jquery的.before函数可以添加内容至最前面 参考技术C object.add(oElement [, iIndex])
第2个参数就是索引号。追问

能具体点么？ 比如现在 索引 0 已经有值了 怎么办

追答

index 可选参数：
指定元素放置所在的索引号，整形值。如果没有指定值，将添加到集合的最后。 有的往后排。
想加到最前面，指定索引值0就可以了。

使用原生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中