layui实现三级联动效果

前端  /  管理员 发布于 4年前   548

本文实例为大家分享了layui实现三级联动效果的具体代码，供大家参考，具体内容如下

                                 
    
           请选择省             
           请选择市             
           请选择县/区                      

JS:address.js

layui.define(["form","jquery"],function(exports){  var form = layui.form,  $ = layui.jquery,  Address = function(){};   Address.prototype.provinces = function() {   //加载省数据   var proHtml = '',that = this;   $.get("area",{code:'',type:1}, function (pro) {     for (var i = 0; i < pro.length; i++) {    proHtml += '' + pro[i].name + '';   }    //初始化省数据    $("select[name=province]").append(proHtml);    form.render();    form.on('select(province)', function (proData) {      $("select[name=area]").html('请选择县/区');    var value = proData.value;        if (value > 0) {     $.post('area',{code:value,type:2},function (val) {      //console.log(val.length) ;      that.citys(val) ;     },"json");     //that.citys(pro[$(this).index() - 1].childs);      } else {     $("select[name=city]").attr("disabled", "disabled");    }   });  },'json'); }  //加载市数据  Address.prototype.citys = function(citys) {    var cityHtml = '请选择市',that = this;   for (var i = 0; i < citys.length; i++) {    cityHtml += '' + citys[i].name + '';   }   $("select[name=city]").html(cityHtml).removeAttr("disabled");   form.render();   form.on('select(city)', function (cityData) {    var value = cityData.value;    if (value > 0) {    $.post('area',{code:value,type:3},function (area) {     that.areas(area) ;    },"json");    //that.areas(citys[$(this).index() - 1].childs);   } else {     $("select[name=area]").attr("disabled", "disabled");    }   });  }   //加载县/区数据  Address.prototype.areas = function(areas) {   var areaHtml = '请选择县/区';   for (var i = 0; i < areas.length; i++) {    areaHtml += '' + areas[i].name + '';   }   $("select[name=area]").html(areaHtml).removeAttr("disabled");   form.render();  }   var address = new Address();  exports("address",function(){   address.provinces();  }); }); 

ajax ->PHP 后台

/**  * 地区三级联动  */  public function areaAction(){   $code = $this->sys_getparam('code' ) ; // 获取省市区数据   $type = $this->sys_getparam('type' ) ;      if($type==1){ //省    $sql = "   SELECT id AS code,province AS name FROM a_province ;   " ;   }   if($type==2){ //市    $sql = "   SELECT id AS code,city AS name FROM a_city WHERE province_id= $code ;   " ;   }   if($type==3){ //区    $sql = "   SELECT id AS code,district AS name FROM a_district WHERE city_id= $code ;   " ;   }   $areaData = app::dbload($sql,'all');   echo json_encode($areaData) ;  }

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• layui实现下拉框三级联动
• 解决layui 三级联动下拉框更新时回显的问题