如有疑问加qq:3053916151
直接上代码
html代码
<form class="layui-form">
<div class="layui-input-inline">
<select name="province" lay-filter="province" id="province">
<option value="">请选择省</option>
<!--省级的先后台查询数据后渲染,我这用的tp5框架-->
{volist name="$province" id="v"}
<option value="{$v.id}">{$v.name}</option>
{/volist}
</select>
</div>
<div class="layui-input-inline">
<select name="city" lay-filter="city" id="city">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="district" lay-filter="district" id="district">
<option value="">请选择县/区</option>
</select>
</div>
</form>
js部分
layui.use(['laypage', 'layer', 'table'], function(){
var form=layui.form
//省
form.on('select(province)', function(data){
$.ajax({
beforeSend:function(){
layer.load(2);
},
url: '/index/thisapi/province',
type: "POST",
async: true,
dataType: "json",
data:{id:data.value},
error: function(error) {
layer.msg("请求失败");
return false;
},
success: function(ret) {
$('#city').empty();
$('#city').append('<option>请选择市</option>');
if (ret.code) {
$(ret.msg).each(function(i,val){
$('#city').append('<option value="'+val.id+'">'+val.name+'</option>')
})
}else{
layer.msg(ret.msg,{time:2000});
}
form.render('select');
},
complete:function(){
layer.closeAll('loading');
}
});
})
//市
form.on('select(city)', function(data){
$.ajax({
beforeSend:function(){
layer.load(2);
},
url: '/index/thisapi/province',
type: "POST",
async: true,
dataType: "json",
data:{id:data.value,type:'city'},
error: function(error) {
layer.msg("请求失败");
return false;
},
success: function(ret) {
$('#district').empty();
$('#district').append('<option>请选择县/区</option>');
if (ret.code) {
$(ret.msg).each(function(i,val){
$('#district').append('<option value="'+val.id+'">'+val.name+'</option>')
})
}else{
layer.msg(ret.msg,{time:2000});
}
form.render('select');
},
complete:function(){
layer.closeAll('loading');
}
});
})
});