- 首先html加入这3组下拉框,这里有个重点,lay-filter
请选择省
{$val.name}
请选择市
{$val.name}
请选择县/区
{$val.name}
- 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]);
}
- 效果演示
最后附上表设计:
文章来源于互联网:layui 三级联动