layui實現三級聯動效果

2024-05-06 16:53:38

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了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) ;  }

效果：

layui,三級聯動