本文實例為大家分享了layui實現(xiàn)三級聯(lián)動效果的具體代碼，供大家參考，具體內(nèi)容如下
公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出泉山免費做網(wǎng)站回饋大家。
JS:address.js
重慶分公司
重慶分公司
layui.define(["form","jquery"],function(exports){
var form = layui.form,
$ = layui.jquery,
Address = function(){};
Address.prototype.provinces = function() {
//加載省數(shù)據(jù)
var proHtml = '',that = this;
$.get("area",{code:'',type:1}, function (pro) {
for (var i = 0; i < pro.length; i++) {
proHtml += '';
}
//初始化省數(shù)據(jù)
$("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');
}
//加載市數(shù)據(jù)
Address.prototype.citys = function(citys) {
var cityHtml = '',that = this;
for (var i = 0; i < citys.length; i++) {
cityHtml += '';
}
$("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");
}
});
}
//加載縣/區(qū)數(shù)據(jù)
Address.prototype.areas = function(areas) {
var areaHtml = '';
for (var i = 0; i < areas.length; i++) {
areaHtml += '';
}
$("select[name=area]").html(areaHtml).removeAttr("disabled");
form.render();
}
var address = new Address();
exports("address",function(){
address.provinces();
});
}); ajax ->PHP 后臺
/**
* 地區(qū)三級聯(lián)動
*/
public function areaAction(){
$code = $this->sys_getparam('code' ) ; // 獲取省市區(qū)數(shù)據(jù)
$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){ //區(qū)
$sql = "
SELECT id AS code,district AS name FROM a_district WHERE city_id= $code ;
" ;
}
$areaData = app::dbload($sql,'all');
echo json_encode($areaData) ;
}效果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
