码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-07-13 17:35:12      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:on()   sel   ref   htm   content   style   nfa   代码   .sh   

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

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

标签:on()   sel   ref   htm   content   style   nfa   代码   .sh   

原文地址:https://www.cnblogs.com/yxkj/p/9305919.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!