朱纯树博客
VPS测评推荐网站
cloudacead cloudacead

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

赞(2) 打赏
未经允许不得转载:VPS测评推荐网站 - 朱纯树博客 » layui 三级联动

评论 7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    how expensive is viagra Plasma exposure of diazepam 10 mg BID was increased by 28 following administration of valdecoxib 40 mg BID for 12 days, while plasma exposure of valdecoxib 40 mg BID was not substantially increased following administration of diazepam 10 mg BID for 12 days

    tritymn2周前 (03-11)回复
  2. #0

    buy cheap generic cialis uk Trastuzumab binds to HER2 and keeps it from working within the cell

    tritymn4周前 (02-27)回复
  3. #0

    I m trying my best to make sure he is active and I take him for walks in the morning, buying cialis online safe

    Inefeby1个月前 (02-24)回复
  4. #0

    Download a registration form for sign up information buy lasix online cheap Although the study is powered to detect SSE differences, the analyses in this study failed to exclude subtle fractures that occurred before the endpoint measurement

    DeettyhoW2个月前 (02-07)回复
  5. #0

    When we process the membership we can tell that it is a renewal buy cheap cialis online

    DeettyhoW2个月前 (02-02)回复
  6. #0

    Targeting lipid rafts inhibits protein kinase B by disrupting calcium homeostasis and attenuates malignant properties of melanoma cells buy priligy 30mg

    DeettyhoW2个月前 (01-29)回复
  7. #0

    抠图网: http://huayu920.com/

    东南亚小野猫1年前 (2022-01-07)回复