溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了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) ;
}
效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
