layui（省市区）三级联动简介：公司写demo的时候写的⼀个，感觉挺有价值，做⼀个记录，需要的⼩伙伴可以下载看⼀下。
效果图：
1、添加html代码
<form class="layui-form">
<div class="layui-form-item layui-row">
<div class="layui-col-md4">
<label class="layui-form-label">请选择省:</label>
<div class="layui-input-block">
<select name="quiz1" id="quiz1" lay-filter="test">
</select>
</div>
</div>
<div class="layui-col-md4">
<label class="layui-form-label">请选择市:</label>
<div class="layui-input-block">
<select name="quiz2" id="quiz2" lay-filter="test1">
</select>
</div>
</div>
<div class="layui-col-md4">
<label class="layui-form-label">请选择县/区:</label>
<div class="layui-input-block">
<select name="quiz3" id="quiz3">
</select>
</div>
</div>
</div>
</form>
2、数据格式和触发事件
{"regionName":'成华区',"regionCode":"001"},        {"regionName":'武侯区',"regionCode":"002"},        {"regionName":'青⽺区',"regionCode":"003"},        {"regionName":'⾼新区',"regionCode":"004"},        {"regionName":'锦江区',"regionCode":"005"}    ],
"street":[
{"regionName":'成华区1',"regionCode":"001"},        {"regionName":'成华区2',"regionCode":"002"},        {"regionName":'成华区3',"regionCode":"003"},        {"regionName":'成华区4',"regionCode":"004"},        {"regionName":'成华区5',"regionCode":"005"}    ],
"place":[
{"regionName":'街道1',"regionCode":"001"},        {"regionName":'街道2',"regionCode":"002"},        {"regionName":'街道3',"regionCode":"003"},        {"regionName":'街道4',"regionCode":"004"},        {"regionName":'街道5',"regionCode":"005"}    ]
};
// ⼀级联动事件触发
<('select(test)', function(data){
var value = data.value;
areaState.area.fn(value);
});
// ⼆级联动事件触发
<('select(test1)', function(data){
var value = data.value;
areaState.street.fn(value);
});
3、事件对象
state: false,
data: [],
fn: function(value){ // value 表⽰的是区域代码，及传到后台的数据
this.state = true; // 可能以后会⽤到
areaState.street.state = false; // 可能以后会⽤到
areaState.place.state = false; // 可能以后会⽤到
// 从后台调⽤真实接⼝
// get(function(data){
//    areaState.street.data = data;
//    console.log(areaState.street.data);
//    addSelect('street select',areaState.street.data,false,'regionCode','regionName');            // }
areaState.street.data = selDate.street;
if(value !== '') {
addSelect('quiz2',areaState.street.data,true,'regionCode','regionName');
} else {
$('#quiz2').html('');
$('#quiz3').html('');
}
}
},
street: {
state: false,
data: [],
fn: function(value){
this.state = true;
areaState.place.state = false;
areaState.place.data = selDate.place;
if(value !== '') {
addSelect('quiz3',areaState.place.data,true,'regionCode','regionName');
} else {
$('#quiz3').html('');
}
}
},
place: {
state: false,
data: [],
fn: function(){
this.state = true;
}
}
};
4、数据默认加载
function addSelect(id,data,bool,val,text,region){//bool是否添加“请选择”选项
val = val || 'type';
text = text || 'name';
var d="'"+region+"'";
var html = '';
var $id = $('#'+id);
$id.html('');
if(bool){html += '<option value="">请选择</option>';}
for(var i in data){
html +='<option value="'+data[i][val]+'">'+data[i][text]+'</option>';
}
layui下载
$id.html(html);
}
addSelect('quiz1',selDate.area,true,'regionCode','regionName');
说明：这⾥没有做什么封装，数据灵活运⽤，加载⽅式可根据实际情况来定，demo⾥⾯的例⼦加上ajax请求即可实现联动效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。