layui实现三级联动效果

2019-11-19 11:07:40

字体：大中小

来源：转载

供稿：网友

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

<html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <meta name="renderer" content="webkit">   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">   <meta name="apple-mobile-web-app-status-bar-style" content="black">   <meta name="apple-mobile-web-app-capable" content="yes">   <meta name="format-detection" content="telephone=no">   <link rel="stylesheet" href="src/css/layui.css" />  </head>  <body>   <div class="layui-form">    <div class="layui-input-inline">     <select name="province" lay-filter="province" class="province">      <option value="">请选择省</option>     </select>    </div>    <div class="layui-input-inline">     <select name="city" lay-filter="city" disabled>      <option value="">请选择市</option>     </select>    </div>    <div class="layui-input-inline">     <select name="area" lay-filter="area" disabled>      <option value="">请选择县/区</option>     </select>    </div>   </div>  </body>  <script type="text/javascript" src="src/layui.js"></script>  <script type="text/javascript" src="src/address.js"></script>  <script type="text/javascript">   layui.config({    base : "src/" //address.js的路径   }).use([ 'layer', 'jquery', "address" ], function() {    var layer = layui.layer, $ = layui.jquery, address = layui.address();    });  </script> <html>

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 += '<option value="' + pro[i].code + '">' + pro[i].name + '</option>';   }    //初始化省数据    $("select[name=province]").append(proHtml);    form.render();    form.on('select(province)', function (proData) {      $("select[name=area]").html('<option value="">请选择县/区</option>');    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 = '<option value="">请选择市</option>',that = this;   for (var i = 0; i < citys.length; i++) {    cityHtml += '<option value="' + citys[i].code + '">' + citys[i].name + '</option>';   }   $("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 = '<option value="">请选择县/区</option>';   for (var i = 0; i < areas.length; i++) {    areaHtml += '<option value="' + areas[i].code + '">' + areas[i].name + '</option>';   }   $("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) ;  }

效果：