使用数据字典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即可，加入相应需要的自定义属性

写的不是很好，较为繁琐，有时间再去修改