layui 三级联动

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

      

   请选择省

    

   {$val.name}

      

   请选择市

    

   {$val.name}

      

   请选择县/区

    

   {$val.name}

2. 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);

   });

3. 上面数据请求调用了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;

   },

4. 调用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]);

   }

5. 效果演示

   

   

   

   最后附上表设计:

   

文章来源于互联网:layui 三级联动