3级联动写法

日期:2019-10-12 浏览:55次

前端单独请求,后台根据数据查询

html代码部分展示(雷同):

<select class="form-control" name="area" id="input_ares">

</select>
js代码如下:

get_city();
//获取城市
function get_city() {
    $.ajax({
        url:"{:url('get_city')}",
        type:'POST',
        timeout: 10000,
        success:function(res){
            var data    = JSON.parse(res);
            // console.log(data);return;
            var html    = '';
            $.each(data.data,function(i,n){
                html    +=  '<option value="' + n.id + '" >'+ n.name +'</option>\n';
            });
            $('#input_city').append(html);
            //获取区域
            get_ares('');
        },
        error:function(e){
            alert('网络请求超时,请稍后再试');
        }
    });
}

//监听城市选择
$('#input_city').change(function(data){
    var id  = $('#input_city').val();
    get_ares(id);
});

//获取区域
function get_ares(id) {
    $.ajax({
        url:"{:url('get_district')}",
        type:'POST',
        data:{city:id},
        timeout: 10000,
        success:function(res){
            var data    = JSON.parse(res);
            // console.log(data);return;
            var html    = '';
            $.each(data.data,function(i,n){
                html    +=  '<option value="' + n.id + '" >'+ n.name +'</option>\n';
            });
            $('#input_ares').html(html);
        },
        error:function(e){
            alert('网络请求超时,请稍后再试');
        }
    });
}

没有评论

发表评论