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

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

阅读量：6927 次

发布时间：2019-06-27

本文共 3302 字，大约阅读时间需要 11 分钟。

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

　　实现代码：

<!DOCTYPE html>

<html>

<head>

<title>基于 Layui form 组件的省市区级联的实现</title>

</head>

<body>

</select>

</div>

</select>

</div>

</select>

</div>

</form>

</div>

(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 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();

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>