jquery简单多选下拉框

傷城~ 2022-03-18 08:24 386阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .checks_div_select {
                width: 112px;
                height:245px;
                background-color: #e9fbfb;
                border: 1px solid #18cbcd;
                font-family: 'Verdana', '宋体';
                font-size: 12px;
                position: absolute;
                top: 38px;
                z-index:1;
            }
        </style>
    </head>
    <body>
    <div style="position:relative;"> 
         <input type="text" id="test_div" class="form-control" style="width:110px; height:35px;" readonly /> 
    </div>
    <br/>
    <br/>
    <div style="position:relative;"> 
         <input type="text" id="test_div1" class="form-control" style="width:110px; height:35px;" readonly /> 
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script language="javascript">
        (function () {
            $.fn.extend({
                checks_select: function (options,checks) {
    
                    var jq_checks_select = $("<div class='checks_div_select'></div>").insertAfter($(this));
                    var jq_check;
    
                    var tx = ''
                    // if(checks.length>0){
                        $(this).attr('data-key', checks.join(','));
    
                        $.each(options, function (i, n) {
                            if($.inArray(Number(i),checks)!=-1){
                                check_div = $("<div style='height:20px;'> <input type='checkbox' checked data-key='" + i + "' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_select);
                                tx += '、'+ n;
                            }else{
                                check_div = $("<div style='height:20px;'> <input type='checkbox' data-key='" + i + "' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_select);
                            }
    
                            check_box = check_div.children();
                            check_box.click(function (e) {
    
                                var temp = "";
                                var tempKey = [];
                            
                                $(this).parent().parent().children().children("input:checked").each(function (i) {
                                    if (i == 0) {
                                        temp = $(this).attr("value");
                                    } else {
                                        temp += "、" + $(this).attr("value");
                                    }
                                    
                                    tempKey.push($(this).attr("data-key"));
                                });
                                jq_check.attr("value", temp);
                                jq_check.attr("data-key", tempKey.join(','));
                                e.stopPropagation();
                            });
                        })
                        tx = tx.substring(1,tx.length)
                    // }
                    $(this).attr("value", tx);
                    jq_checks_select.hide();
                    
    
                    $(this).click(function (e) {
                        jq_check = $(this);
                        jq_checks_select.toggle().parent().siblings().children('.checks_div_select').hide();
                        e.stopPropagation();
                    });
                    $(document).click(function () {
                        jq_checks_select.hide();
                    });
                }
            })
     
        })(jQuery);
     
        $(document).ready(function(){
        var options = {
            10: "下单时间",
            11: "取件时间",
            12: "已支付",
            13: "未支付",
            14: "部分支付",
            15: "赠送",
            0: "已收件",
            1: "清洗中",
            2: "已上挂",
            3: "已取件",
            4: "已退件"
        };
        var checks = [4,10,0]
     
        $("#test_div").checks_select(options,checks);
        $("#test_div1").checks_select(options,[...checks,11]);
        });
     
    </script>
    </body>
    </html>

参考：https://blog.csdn.net/xiaogechengxuyuan/article/details/79387816