php中layui 三级联动,layui实现三级联动效果

layui实现三级联动效果

发布时间：2020-09-10 09:05:54

来源：脚本之家

阅读：105

作者：shao_keke

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

请选择省

请选择市

请选择县/区

layui.config({

base : "src/" //address.js的路径

}).use([ 'layer', 'jquery', "address" ], function() {

var layer = layui.layer, $ = layui.jquery, address = layui.address();

});

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) ;

}

效果：

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