首页 > 文章 > 后端开发 > 如何利用PHP实现开发中基于layUI的三级联动效果的代码

如何利用PHP实现开发中基于layUI的三级联动效果的代码

不言原创: 2018-07-14 17:12:182254浏览

这篇文章主要介绍了关于如何利用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([&#39;jquery&#39;, &#39;form&#39;], function() {
$ = layui.jquery;
form = layui.form();
$form = $(&#39;form&#39;);
$selectProvince=$form.find(&#39;select[name=province]&#39;);
$selectCity=$form.find(&#39;select[name=city]&#39;);
$selectArea=$form.find(&#39;select[name=area]&#39;);
form.on(&#39;select(province)&#39;, function(data){
var value = data.value;
var d = value.split(&#39;_&#39;);
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(&#39;[data-new=1]&#39;).remove();
$selectArea.find(&#39;[data-new=1]&#39;).remove();
form.render(&#39;select&#39;);
}
});
form.on(&#39;select(city)&#39;, function(data){
var value = data.value;
var d = value.split(&#39;_&#39;);
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(&#39;select(area)&#39;, function(data){
});
loadProvince();
});
function loadProvince(){
for(var i=0,length=areaData.length;i<length;i++){
$selectProvince.append(&#39;<option value="&#39;+ areaData[i].provinceCode + &#39;_&#39; + areaData[i].mallCityList.length + &#39;_&#39; + i + &#39;">&#39;+areaData[i].provinceName+&#39;</option>&#39;)
}
form.render(&#39;select&#39;);
}
function loadCity(citys,areaIndex){
$selectCity.find(&#39;[data-new=1]&#39;).remove();
$selectArea.find(&#39;[data-new=1]&#39;).remove();
for(var i=0,length=citys.length;i<length;i++){
$selectCity.append(&#39;<option data-new ="1" value="&#39;+ citys[i].cityCode + &#39;_&#39; + citys[i].mallAreaList.length + &#39;_&#39; + i + &#39;_&#39;+areaIndex+&#39;">&#39;+citys[i].cityName+&#39;</option>&#39;)
}
form.render(&#39;select&#39;);
}
function loadArea(areas){
$selectArea.find(&#39;[data-new=1]&#39;).remove();
$selectArea.find(&#39;[data-new=1]&#39;).remove();
for(var i=0,length=areas.length;i<length;i++){
$selectArea.append(&#39;<option data-new ="1" value="&#39;+ areas[i].areaCode+&#39;">&#39;+areas[i].areaName +&#39;</option>&#39;)
}
form.render(&#39;select&#39;);
}
})()
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

如何利用PHP实现开发中基于layUI的三级联动效果的代码

相关文章