집 > 기사 > 백엔드 개발 > 개발 시 PHP를 사용하여 LayUI 기반의 3단계 연계 효과 코드를 구현하는 방법

개발 시 PHP를 사용하여 LayUI 기반의 3단계 연계 효과 코드를 구현하는 방법

不言원래의: 2018-07-14 17:12:182201검색

이 글은 주로 개발 시layUI를 기반으로 한 3단계 연계 효과를 구현하기 위해 PHP를 사용하는 방법에 대한 코드를 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유합니다. 🎜🎜## 🎜🎜#백엔드 개발에서는 전체 페이지 효과가 아름답고 넉넉해 보일 수 있도록layUI 프레임워크를 사용하는 경우가 많습니다. 그러나 때때로 일부 기본 효과를layUI 프레임워크에 배치할 때 사용할 수 없는 경우가 있습니다. 도, 시, 군 간 3단계 연계 선택 효과. 이전과 다르게layUI 프레임워크에서는 이벤트를 수신하기 위해 select의lay-filter 속성에 주의해야 하며, 이 두 가지 문제를 해결하려면 linkage가 필요합니다. 더 이상 문제가 되지 않습니다. 아래에서 공유해 드리겠습니다.

구현 코드:

<!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 기반의 3단계 연계 효과 코드를 구현하는 방법

관련 기사