Wie man PHP verwendet, um den Code für dreistufige Verknüpfungseffekte basierend auflayUI während der Entwicklung zu implementieren-PHP-Tutorial-php.cn

Wie man PHP verwendet, um den Code für dreistufige Verknüpfungseffekte basierend auflayUI während der Entwicklung zu implementieren

不言

Freigeben： 2023-04-03 08:12:02

Original

2262 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den Code zur Verwendung von PHP zur Realisierung des dreistufigen Verknüpfungseffekts basierend auf LayUI vor. Jetzt kann ich ihn mit Ihnen teilen.

Backend-Entwicklung verwendet häufig das LayUI-Framework, um die gesamte Seite schön und elegant aussehen zu lassen. Allerdings können einige native Effekte manchmal nicht auf dem LayUI-Framework verwendet werden. Beispielsweise sind wir kürzlich auf den Auswahleffekt der dreistufigen Verknüpfung gestoßen Provinzen, Städte und Landkreise. Im Gegensatz zu den vorherigen müssen Sie im LayUI-Framework auf das Lay-Filter-Attribut von select achten, um auf Ereignisse zu warten, und form.render() wird zum erneuten Rendern benötigt. Um diese beiden Probleme zu lösen, ist eine Verknüpfung erforderlich kein Problem mehr. Lassen Sie mich es unten mit Ihnen teilen.

Implementierungscode:

<!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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Funktion debug_backtrace() in PHP zum Drucken von Debugging-Informationen am Aufrufort

Lass uns reden über Framework-Entwicklung, Abhängigkeitsinjektion, Container und Erscheinungsmuster (unterer Teil)

Das obige ist der detaillierte Inhalt vonWie man PHP verwendet, um den Code für dreistufige Verknüpfungseffekte basierend auflayUI während der Entwicklung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!