如何利用PHP实现开发中基于layUI的三级联动效果的代码-php教程-PHP中文网

首页

后端开发

php教程

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

不言

Jul 14, 2018 pm 05:12 PM

三级联动

这篇文章主要介绍了关于如何利用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中文网！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7663

CakePHP 教程

1393

C# 教程

1205

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

支付宝PHP SDK转账报错：如何解决'Cannot declare class SignData”问题？ Apr 01, 2025 am 07:21 AM

支付宝PHP...

在PHP API中说明JSON Web令牌（JWT）及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一种基于JSON的开放标准，用于在各方之间安全地传输信息，主要用于身份验证和信息交换。1.JWT由Header、Payload和Signature三部分组成。2.JWT的工作原理包括生成JWT、验证JWT和解析Payload三个步骤。3.在PHP中使用JWT进行身份验证时，可以生成和验证JWT，并在高级用法中包含用户角色和权限信息。4.常见错误包括签名验证失败、令牌过期和Payload过大，调试技巧包括使用调试工具和日志记录。5.性能优化和最佳实践包括使用合适的签名算法、合理设置有效期、

会话如何劫持工作，如何在PHP中减轻它？ Apr 06, 2025 am 12:02 AM

会话劫持可以通过以下步骤实现：1.获取会话ID，2.使用会话ID，3.保持会话活跃。在PHP中防范会话劫持的方法包括：1.使用session_regenerate_id()函数重新生成会话ID，2.通过数据库存储会话数据，3.确保所有会话数据通过HTTPS传输。

描述扎实的原则及其如何应用于PHP的开发。 Apr 03, 2025 am 12:04 AM

SOLID原则在PHP开发中的应用包括：1.单一职责原则（SRP）：每个类只负责一个功能。2.开闭原则（OCP）：通过扩展而非修改实现变化。3.里氏替换原则（LSP）：子类可替换基类而不影响程序正确性。4.接口隔离原则（ISP）：使用细粒度接口避免依赖不使用的方法。5.依赖倒置原则（DIP）：高低层次模块都依赖于抽象，通过依赖注入实现。