layui 三级联动

首先html加入这3组下拉框,这里有个重点,lay-filter

js部分,对下拉框进行监听

layui.config({

    base: '/public/static/admin/js/',

    version: new Date().getTime() //为了更新 js 缓存，可忽略

}).extend({ //设定模块别名

    common: 'common'  //如果 common.js 是在根目录，也可以不用设定别名

}).use(['table', 'form', 'common'], function () {...

//监听select选择 省

form.on('select(province)', function(obj){

    var cityobj = $('#city');

    common.getArea(obj.value,cityobj);

    $('#area').empty();

});

//监听select选择 市

form.on('select(city)', function(obj){

    var areaobj = $('#area');

    common.getArea(obj.value,areaobj);

});

上面数据请求调用了common.js的getArea()函数

/**

 * 获取下级区域

 */

getArea: function(value,obj){

    var optionHtml = '';

    $.get('/index.php?m=Admin&c=Api&a=getRegion&parent_id='+value, function (res) {

        if (res.code == 1) {

            //替换下拉框的内容

            $(obj).empty().html(res.data);

            form.render('select');

        } else {

            return false;

        }

    });

    return optionHtml;

},

调用Api控制器的getRegion()方法

public function getRegion()

{

    $parent_id = I('get.parent_id');

    $data = M('region2')->where("parent_id=$parent_id")->select();

    $html = '选择区域';

    if ($data) {

        foreach ($data as $h) {

            $html .= "{$h['name']}";

        }

    }

    $this->ajaxReturn(['code'=>1,'msg'=>'操作成功','data'=>$html]);

}

效果演示

最后附上表设计: