layui实现三级联动效果
编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了layui实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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) ;
}
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：layUI实现三级导航菜单效果
下一篇：layui实现三级导航菜单