PHP開發中基於layUI的三級聯動效果如何實現
後臺開發常常用到layUI框架，這樣才能讓整個頁面效果看起來美觀大方，然而有時候一些原生的效果放到layUI框架上是無法使用的，比如最近遇到了省市縣三級聯動的select效果。不同於之前的，layUI框架裏，需要重視select的lay-filter屬性，來監聽事件，另外需要form.render()來重新渲染，解決這兩大難題，聯動也就不再是難題。下面就來為大家分享下吧。
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基於 Layui form 組件的省市區級聯的實現</title>
<link rel="stylesheet" href="http://www.zhengjinfan.cn/plugins/layui/css/layui.css" />
</head>
<body>
<div style="margin: 50px auto; ">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">選擇地區</label>
<div class="layui-input-inline">
<select name="province" lay-filter="province">
<option value="">請選擇省</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="city" lay-filter="city">
<option value="">請選擇市</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="area" lay-filter="area">
<option value="">請選擇縣/區</option>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="http://www.zhengjinfan.cn/plugins/layui/layui.js"></script>
<script type="text/javascript" src="http://www.zhengjinfan.cn/js/area.js"></script>
<script>
(function(){
var areaData=Area;
var $, $form,form;
var $selectProvince,$selectCity,$selectArea;
layui.use([‘jquery‘, ‘form‘], function() {
$ = layui.jquery;
form = layui.form();
$form = $(‘form‘);
$selectProvince=$form.find(‘select[name=province]‘);
$selectCity=$form.find(‘select[name=city]‘);
$selectArea=$form.find(‘select[name=area]‘);
form.on(‘select(province)‘, function(data){
var value = data.value;
var d = value.split(‘_‘);
var code = d[0];
var count = d[1];
var index = d[2];
if(count > 0) {
loadCity(areaData[index].mallCityList,index);
$selectCity.parent().show();
} else {
$selectCity.parent().hide();
$selectArea.parent().hide();
$selectCity.find(‘[data-new=1]‘).remove();
$selectArea.find(‘[data-new=1]‘).remove();
form.render(‘select‘);
}
});
form.on(‘select(city)‘, function(data){
var value = data.value;
var d = value.split(‘_‘);
var code = d[0];
var count = d[1];
var index = d[2];
var areaIndex=d[3];
if(count > 0) {
loadArea(areaData[index].mallCityList[index].mallAreaList);
$selectArea.parent().show();
} else {
$selectArea.parent().hide();
}
});
form.on(‘select(area)‘, function(data){
});
loadProvince();
});
function loadProvince(){
for(var i=0,length=areaData.length;i<length;i++){
$selectProvince.append(‘<option value="‘+ areaData[i].provinceCode + ‘_‘ + areaData[i].mallCityList.length + ‘_‘ + i + ‘">‘+areaData[i].provinceName+‘</option>‘)
}
form.render(‘select‘);
}
function loadCity(citys,areaIndex){
$selectCity.find(‘[data-new=1]‘).remove();
$selectArea.find(‘[data-new=1]‘).remove();
for(var i=0,length=citys.length;i<length;i++){
$selectCity.append(‘<option data-new ="1" value="‘+ citys[i].cityCode + ‘_‘ + citys[i].mallAreaList.length + ‘_‘ + i + ‘_‘+areaIndex+‘">‘+citys[i].cityName+‘</option>‘)
}
form.render(‘select‘);
}
function loadArea(areas){
$selectArea.find(‘[data-new=1]‘).remove();
$selectArea.find(‘[data-new=1]‘).remove();
for(var i=0,length=areas.length;i<length;i++){
$selectArea.append(‘<option data-new ="1" value="‘+ areas[i].areaCode+‘">‘+areas[i].areaName +‘</option>‘)
}
form.render(‘select‘);
}
})()
</script>
</body>
</html>
相信現在大家已經知道是如何實現的了，如果還存在有疑問的程序開發者，可以留言給我們，歡迎大家留言共同討論學習。本文由專業的鄭州app開發公司燚軒科技整理發布，如需轉載請註明出處。
PHP開發中基於layUI的三級聯動效果如何實現