layui实现三级联动效果

这篇文章主要为大家详细介绍了layui实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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[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[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[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) ; }

效果：