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

最新推荐文章于 2024-05-06 03:07:32 发布

燚轩科技

最新推荐文章于 2024-05-06 03:07:32 发布

阅读量893

点赞数

分类专栏：原创技术分享文章标签：三级联动

本文链接：https://blog.csdn.net/qq_41760133/article/details/81034230

版权

原创技术分享专栏收录该内容

67 篇文章 0 订阅

订阅专栏

　　后台开发常常用到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开发公司燚轩科技整理发布，如需转载请注明出处。

燚轩科技

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHP开发中基于layUI的三级联动效果如何实现

　　后台开发常常用到layUI框架，这样才能让整个页面效果看起来美观大方，然而有时候一些原生的效果放到layUI框架上是无法使用的，比如最近遇到了省市县三级联动的select效果。不同于之前的，layUI框架里，需要重视select的lay-filter属性，来监听事件，另外需要form.render()来重新渲染，解决这两大难题，联动也就不再是难题。下面就来为大家分享下吧。　　实现代码：&lt;...
复制链接

扫一扫