jquery easyui下拉框多选和原生多选下拉多选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>利用EasyUI实现多选下拉框</title>
    <link rel="stylesheet" type="text/css" href="EasyUI/easyui.css" />
    <script type="text/javascript" src="EasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#ddlLine').combotree({
                valueField: "id", //Value字段
                textField: "text", //Text字段
                multiple: true,
                data:  [{ "id": 13, "text": "C1" }, { "id": 14, "text": "C2" }, { "id": 15, "text": "C3" }] ,
                //  url: "tree_data2.json", //数据源
                onCheck: function (node, checked) {
                    //让全选不显示
                    $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));
                },
                onClick: function (node, checked) {
                    //让全选不显示
                    $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));
                }
            });
        })
    </script>
</head>

<body>
    多选：<select id="ddlLine" class="easyui-combotree" style="width: 205px; height: 24px;">
    </select>
</body>

</html>

模拟了当后端给数据时候渲染和当用户选择后保存后，再次点编辑后端返回用户所选的值的时候，下拉的复选框也会根据返回的内容进行勾选

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #conter{
            position: relative;
            top: 20%;
            left: 40%;
            right: 40%;
            margin-top: 33px;
            width: 243px;
            height: 29px;
        }
        ul{
            padding-left: 0;
            width: 200px;
        background-color: pink;
        position: absolute;
        top: 10%;
        left: 40%;
        right: 40%;
        display: none;
        }
    ul>li{
        width: 100%;
        height: 25px;
        border: 1px solid #000;
        list-style: none;
    }
    .current{
        display: inline-block !important;
    }
    </style>
    <script src="../jquery-1.11.1.min.js"></script>
</head>

<body>
    <input type="text" id="conter">
    <ul>
    </ul>
</body>
<script>
    $(function () {
        var text3 = '南京,上海,';  //模拟数据
        var data = [{
            "name": "全部",
            "city": [{
                    "cityName": "南京",
                    "cityNumber": "001"
                },
                {
                    "cityName": "杭州",
                    "cityNumber": "004"
                },
                {
                    "cityName": "无锡",
                    "cityNumber": "005"
                },
                {
                    "cityName": "上海",
                    "cityNumber": "002"
                },
                {
                    "cityName": "苏州",
                    "cityNumber": "003"
                }
            ]
        }];
        var html = '';
        for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < data[i].city.length; j++) {

                html += '<li><input type="checkbox" value=' + data[i].city[j].cityNumber + '>' + data[i].city[j]
                    .cityName + '</li>';
            }
            $('ul').append(html);
        }

        // 返回的内容填充进去
        $("#conter").val(text3);
        var ctext3 = $("#conter").val()
        var s = ctext3.split(',');
        var list = $('ul').find('li');
        for (var i = 0; i < s.length; i++) {
            for (var j = 0; j < list.length; j++) {
                if (s[i] === list.eq(j).text()) {
            
                    $('li input').eq(j).attr("checked", true);
                    $('li').eq(j).addClass('aa');
                }
            }
        }


        $("#conter").unbind('click').bind('click', function () {
            if ($('ul').hasClass('current')) {
                $('ul').removeClass('current');
            } else {
                $('ul').addClass('current');
            }

        })

        $("li").click(function () {
            var text = $('#conter').val();
            // 如果有这个class证明是点击取消
            if ($(this).hasClass('aa')) {
                $(this).removeClass('aa');
                var remove = $(this).text();
                
                var str = text.replace($(this).text() + ',', "");
                $("#conter").val(str);
            } else {
                $(this).addClass('aa');
                var text1 = text + $(this).text();
                $("#conter").val(text1 + ',');
            }
        })


    })
</script>

</html>

jquery easyui下拉框多选 和原生多选下拉多选

猜你喜欢

jquery easyui下拉框多选和原生多选下拉多选