使用數據字典layui搜索框三聯動

/**
 * 自定義的搜索初始化插件
 * 說明：
 * 給需要異步加載數據字典的加上自定義屬性jq-search="qu"
 * qu為數據字典對應的key
 * 如果需要級聯查詢的則加上自定義屬性lay-filter，
 * 如果沒有下一級或者子集則不需要加
 * 三聯動第一個lay-filter設成1,第三個設成3，代碼中有判定
 * echo用於放入回顯的key
 */
 var Dictionary = {
    init : function() {// 入口
        this.initData();
    },
    initData : function(){//初始化數據
        $(".layui-form select[jq-search]").each(function(){
            //同步加載
            $.ajaxSettings.async = false;
            param = {};
            param.key = $(this).attr("jq-search");
            Dictionary.ajaxDic(param,$(this));
        });
    },
    bindEvent : function(value,id){//綁定數據
        param = {};
        param.key = value;
        Dictionary.ajaxDic(param,$("#"+id+""));
    },
    ajaxDic : function(param,$this){
        //$.ajaxSettings.async = false;
        $.post(path+"/manage/dictionary/search",param,function(data){
            $this.empty();
            $this.append("<option value=''>請輸入或選擇</option>");
            for(var i=0;i < data.length;i++){
                if($this.attr("echo")==data[i].key){
                    $this.append("<option value='"+data[i].key+"' selected>"+data[i].value+"</option>");
                }else{
                    $this.append("<option value='"+data[i].key+"'>"+data[i].value+"</option>");
                }
            }
        });
        if(typeof($this.attr("lay-filter"))!="undefined"){
            Dictionary.bindLayui($this.attr("lay-filter"),$this.parent().next().children("select").attr("id"));
        }
    },
    bindLayui:function(region,id){
        layui.use(['form'],function(){
            layui.form.on("select("+region+")", function(data){
                if(data.value!=""){
                    if(region == '1'){
                        $("select[lay-filter=3]").empty();
                    }
                    if(region != '3'){
                        Dictionary.bindEvent(data.value,id);
                        layui.form.render('select');
                        $("#"+id+"").next().find('dd.layui-this').trigger('click');
                    }
                }
            })
            /*if($("#"+region+"").val()!=""){
                $("#"+region+"").next().find('dd.layui-this').trigger('click');
            }else{
                $("#"+id+"").val("")
            }*/
        })
    }
    /*modifyEcho:function(){
        $(".layui-form select[echo]").each(function(){
            if($(this).attr("echo")!=""){
                $(this).next().find("input").val($(this).attr("echo"));
            }
        });
    }*/
 }

$(function() {
    Dictionary.init();
});

前端頁面

<div class='fl mr20'>
               區域：<div class="layui-inline">
                       <select name="category" id="parentArea" class="layui-input" lay-search jq-search="qu" lay-filter="1">
                    </select>
                  </div>
               <div class="layui-inline">
                   <select name="type" class="layui-input" id="area" lay-search jq-cascade lay-filter="2">
                </select>
            </div>
               <div class="layui-inline">
                  <select name="type" class="layui-input" id="committee" lay-search lay-filter="3">
                </select>
            </div>
        </div>

直接引入js即可，加入相應需要的自定義屬性

寫的不是很好，較為繁瑣，有時間再去修改