php中layui 三级联动,layui怎么实现三级联动

layui实现三级联动的方法：首先创建html的页面；然后创建【address.js】文件，内容为“Address.prototype.provinces = function(){...}”；最后通过layui模块实现三级联动即可。

本教程操作环境：windows10系统、layui2.5.6版，该方法适用于所有品牌电脑。

基于layui的三级联动模块

1.html的页面代码如下：

请选择省

请选择市

请选择县/区

layui.config({

base : "../../../js/" //address.js的路径

}).use([ 'layer', 'jquery', "address" ], function() {

var layer = layui.layer, $ = layui.jquery, address = layui.address();

});

2.address.js的代码入下：ps:需要注意的有：$.get("address.json", function (data) {} 的地址为json地址，地址不对会报异常。

layui.define(["form","jquery"],function(exports){

var form = layui.form,

$ = layui.jquery,

Address = function(){};

Address.prototype.provinces = function() {

//加载省数据

var proHtml = '',that = this;

$.get("address.json", function (data) {

for (var i = 0; i < data.length; i++) {

proHtml += '' + data[i].name + '';

}

//初始化省数据

$("select[name=province]").append(proHtml);

form.render();

form.on('select(province)', function (proData) {

$("select[name=area]").html('请选择县/区');

var value = proData.value;

if (value > 0) {

that.citys(data[$(this).index() - 1].childs);

} else {

$("select[name=city]").attr("disabled", "disabled");

}

});

})

}

//加载市数据

Address.prototype.citys = function(citys) {

var cityHtml = '请选择市',that = this;

for (var i = 0; i < citys.length; i++) {

cityHtml += '' + citys[i].name + '';

}

$("select[name=city]").html(cityHtml).removeAttr("disabled");

form.render();

form.on('select(city)', function (cityData) {

var value = cityData.value;

if (value > 0) {

that.areas(citys[$(this).index() - 1].childs);

} else {

$("select[name=area]").attr("disabled", "disabled");

}

});

}

//加载县/区数据

Address.prototype.areas = function(areas) {

var areaHtml = '请选择县/区';

for (var i = 0; i < areas.length; i++) {

areaHtml += '' + areas[i].name + '';

}

$("select[name=area]").html(areaHtml).removeAttr("disabled");

form.render();

}

var address = new Address();

exports("address",function(){

address.provinces();

});

});

3.address.json的下载地址如下：

一、下载地址https://pan.baidu.com/s/1bprUQSZ

二、下载地址https://download.csdn.net/download/sundy_fly/10149270