如何利用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中文網！

相關推薦：

關於PHP中debug_backtrace() 函數列印呼叫處的偵錯資訊

##聊天框架開發的依賴注入,容器與外觀模式（下部）

以上是如何利用PHP實作開發中基於layUI的三級連動效果的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

您如何修改PHP會話中存儲的數據？Apr 27, 2025 am 12:23 AM

tomodifyDataNaphPsession，startTheSessionWithSession_start（），然後使用$ _sessionToset，修改，orremovevariables.1）startThesession.2）setthesession.2）使用$ _session.3）setormodifysessessvariables.3）emovervariableswithunset（）

舉一個在PHP會話中存儲數組的示例。Apr 27, 2025 am 12:20 AM

在PHP會話中可以存儲數組。 1.啟動會話，使用session_start()。 2.創建數組並存儲在$_SESSION中。 3.通過$_SESSION檢索數組。 4.優化會話數據以提升性能。

垃圾收集如何用於PHP會議？Apr 27, 2025 am 12:19 AM

PHP會話垃圾回收通過概率機制觸發，清理過期會話數據。 1）配置文件中設置觸發概率和會話生命週期；2）可使用cron任務優化高負載應用；3）需平衡垃圾回收頻率與性能，避免數據丟失。

如何在PHP中跟踪會話活動？Apr 27, 2025 am 12:10 AM

PHP中追踪用戶會話活動通過會話管理實現。 1)使用session_start()啟動會話。 2)通過$_SESSION數組存儲和訪問數據。 3)調用session_destroy()結束會話。會話追踪用於用戶行為分析、安全監控和性能優化。

如何使用數據庫存儲PHP會話數據？Apr 27, 2025 am 12:02 AM

利用數據庫存儲PHP會話數據可以提高性能和可擴展性。 1）配置MySQL存儲會話數據：在php.ini或PHP代碼中設置會話處理器。 2）實現自定義會話處理器：定義open、close、read、write等函數與數據庫交互。 3）優化和最佳實踐：使用索引、緩存、數據壓縮和分佈式存儲來提升性能。

簡單地說明PHP會話的概念。Apr 26, 2025 am 12:09 AM

phpsessionstrackuserdataacrossmultiplepagerequestsusingauniqueIdStoredInAcookie.here'showtomanageThemeffectionaly：1）startAsessionWithSessionWwithSession_start（）和stordoredAtain $ _session.2）

您如何循環中存儲在PHP會話中的所有值？Apr 26, 2025 am 12:06 AM

在PHP中，遍歷會話數據可以通過以下步驟實現：1.使用session_start()啟動會話。 2.通過foreach循環遍歷$_SESSION數組中的所有鍵值對。 3.處理複雜數據結構時，使用is_array()或is_object()函數，並用print_r()輸出詳細信息。 4.優化遍歷時，可採用分頁處理，避免一次性處理大量數據。這將幫助你在實際項目中更有效地管理和使用PHP會話數據。