Layui 下拉框多选 —老司机首选

需要加油的老司机快来看看吧!废话不都说,上车看代码!

HTML 代码

<div class="layui-form-item">
            <label class="layui-form-label">品牌分类</label>

            <div class="layui-unselect layui-form-select downpanel cs">
                <div class="layui-select-title">
                    <input type="text" placeholder="请选择品牌分类" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit" style="">

                    <dd><input type="checkbox" name="brand" title="IPoneX" value="1" lay-skin="primary" ></dd>
                    <dd><input type="checkbox" name="brand" title="OPPO" value="2"  lay-skin="primary" ></dd>
                    <dd><input type="checkbox" name="brand" title="VIVO" value="3"  lay-skin="primary" ></dd>
                    <dd><input type="checkbox" name="brand" title="HUAWEI" value="4"  lay-skin="primary" ></dd>

                </dl>
            </div>
        </div>

JS 代码

 layui.use(['layer','jquery','form','element','util'], function(){
        var layer = layui.layer,form = layui.form,element = layui.element,util = layui.util,$=layui.jquery;

        $(function(){

        //    //遍历渲染 不建议用
        //    $("select.downlist").each(function(index,item) {
        //        var $this=$(this);
        //        var $select=$this.next(".layui-form-select");
        //        $select.addClass("downpanel");
        //        var $dl=$select.find("dl");
        //        $(".layui-select-title input",$select).val($this.attr("placeholder"));
        //        $dl.empty();
        //        var str="";
        //        $("option",$this).each(function() {
        //            str=["<dd>","<input class='sk' type='checkbox' name='brand[",$(this).val(),"]' lay-skin='primary' title='",$(this).text(),"' value='true'>","</dd>"].join("");
        //            $dl.append(str);
        //        });
        //        form.render("checkbox");
        //
        //    });

            $(".downpanel").on("click",".layui-select-title",function(e){
                var $select=$(this).parents(".layui-form-select");

                $(".layui-form-select").not($select).removeClass("layui-form-selected");
                $select.addClass("layui-form-selected");
                e.stopPropagation();
            }).on("click",".layui-form-checkbox",function(e){
                e.stopPropagation();
            });
        });
});

获取多选ID值

var id_array=[];
 $("input:checkbox[name='brand']:checked").each(function() {
            id_array.push($(this).val());//向数组中添加元素
        });
 var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串

注意：不要修改HTML代码样式 , 直接粘贴使用。