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 三级联动插图

    layui 三级联动插图1

    layui 三级联动插图2

    最后附上表设计:

    layui 三级联动插图3

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

人已赞赏
PHP学习笔记杂七杂八

tp5项目 Apache切换nginx环境

2020-11-17 11:09:22

JavaScript学习笔记技术杂烩

layui 页面同时加载多个时间插件 出现闪退

2020-11-17 17:52:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索