JQuery动态加载select下拉列表添加option数据代码参考

RoadToTheExpert

已于 2023-02-02 16:02:41 修改

阅读量1.4k

点赞数 1

文章标签： jquery javascript 前端

于 2023-02-02 15:51:26 首次发布

本文链接：https://blog.csdn.net/RoadToTheExpert/article/details/128851508

版权

最近开发时需要做一个动态加载HTML列表框的功能，遇到一些麻烦。

发现以前的动态加载select的代码无效，部分网上搜回来的一些代码也有问题。

重新搜索和整理了一下，写成一个完整的参考例子记录下来。

复制下面代码保存为一个html文件打开运行就能测试效果。

具体代码细节自行研究。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态加载select下拉列表添加option数据</title>
    <script type="text/javascript" src="../js/jquery1.12.4.min.js"></script>

</head>

<body>
<form action="xxx" method="post">
    <select id="cmb" name="cmb" size="5" style="width:20%">
        <option value="red">红</option>
        <option value="blue">蓝</option>
        <option value="green">绿</option>
    </select>
    <br><br><br>
    <input type="button" value="动态加载JS" onclick='load()'>&nbsp;&nbsp;
    <input type="button" value="动态加载JQuery" onclick='load_jq()'>&nbsp;&nbsp;
    <input type="button" value="动态加载AJAX" onclick='load_ajax()'>
</form>

<script>

    //@author: RoadToTheExpert
    //@site:   https://blog.csdn.net/roadtotheexpert

    function jsdata() {
        var listjs = '[{"val":"first","key":"one"},{"val":"two","key":"第二项"}]';
        return JSON.parse(listjs);
    }

    function to_option(list) {
        var str = '';
        for (var i = 0; i < list.length; i++) {
            str += "<option value='" + list[i]["val"] + "'>" + list[i]["key"] + "</option>";
        }
        return str;
    }

    function jq_ready() {
        if (typeof jQuery == 'undefined') {
            alert('请把head-script元素下的jquery引用地址配置正确');
            return false;
        } else {
            return true;
        }
    }

    function load() {
        //这是js加载列表项，无需依赖库，兼容性较好。
        var list = jsdata();
        var str = to_option(list);
        var sel = document.getElementById("cmb");
        //console.log(sel);
        sel.innerHTML = '';
        sel.innerHTML = str;
    }

    function load_jq() {
        if (!jq_ready()) {
            return;
        }
        if (Math.random() > 0.5) {
            $("#cmb").html('');//清空
        }
        $("#cmb").prepend("<option value='0'>请选择</option>");
        $('#cmb').append('<option value="one">first</option>');
        $('#cmb').append('<option value="two">second</option>');
        if (Math.random() > 0.8) {
            $('#cmb').append('<option value="one">这样有</option><option value="two">时无效</option>');
        }
    }


    function load_ajax() {
        if (!jq_ready()) {
            return;
        }

        $.ajax({
            type: 'POST',
            url: 'xxx.action', //返回 ：[{"val":"？","key":"one"},{"val":"？","key":"two"}]
            //data:$('#dlgfrm').serialize(),//提交参数
            dataType: 'json', //返回数据类型
            //dataType:'html', //返回数据类型
            //contentType："application/x-www-form-urlencoded"
            async: true,

            error: function (data) {
                console.log(data);
                alert(data);

            }, success: function (list) {
                var sel = document.getElementById("cmb");
                console.log(sel);
                sel.innerHTML = '';
                var str = to_option(list);
                sel.innerHTML = str;

                /*
                 console.log(list);
                 $("#cmb").remove();
                 //$("#cmb").prepend("<option value='0'>请选择</option>");//添加option值，并置为最顶端的第一个元素
                 　　for (var i = 0; i < list.length; i++) {
                 　　　　$("#cmb").append("<option value='"+list[i]["k"].id+"'>"+list[i]["v"].id+"</option>");
                 }
                 */

            }
        });
    }
</script>

</body>
</html>

RoadToTheExpert

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery动态加载select下拉列表添加option数据代码参考

发现以前的动态加载select的代码无效，部分网上搜回来的一些代码也有问题。最近开发时需要做一个动态加载HTML列表框的功能，遇到一些麻烦。重新搜索和整理了一下，写成一个完整的参考例子记录下来。复制下面代码保存为一个html文件打开运行就能测试效果。具体代码细节自行研究。
复制链接

扫一扫