当前位置： 移动技术网 > IT编程>网页制作>HTML > layui 省市区三级联动

layui 省市区三级联动

2020年07月17日  | 移动技术网IT编程  | 我要评论

如有疑问加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');
        }
    });
})

});

 

本文地址：https://blog.csdn.net/qq_39521804/article/details/107352532

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网