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

这篇文章主要介绍了关于如何利用PHP实现开发中基于layUI的三级联动效果的代码，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

后台开发常常用到layUI框架，这样才能让整个页面效果看起来美观大方，然而有时候一些原生的效果放到layUI框架上是无法使用的，比如最近遇到了省市县三级联动的select效果。不同于之前的，layUI框架里，需要重视select的lay-filter属性，来监听事件，另外需要form.render()来重新渲染，解决这两大难题，联动也就不再是难题。下面就来为大家分享下吧。

实现代码：

基于 Layui form 组件的省市区级联的实现

选择地区

请选择省

请选择市

请选择县/区

(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

$selectProvince.append(''+areaData[i].provinceName+'')

}

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

$selectCity.append(''+citys[i].cityName+'')

}

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

$selectArea.append(''+areas[i].areaName +'')

}

form.render('select');

}

})()

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：