利用第三方接口，实现地区联动

序言
相信很多人在需要用到省市区联动时，第一时间都会想到使用js插件。而这里提供的是一种脱离js插件而完成地区联动的方案，以供参考。

此处将用到腾讯位置服务API接口（https://lbs.qq.com/webservice_v1/guide-region.html）来获取地区信息，使用前需要注册获取应用key。

代码如下：

<select name="province" id="province" >
    <option value="">请选择省份</option>
</select>
<select name="city" id="city" >
    <option value="">请选择城市</option>
</select>
 
<script src="jquery.js"></script>
<script>
//填充省份
$.ajax({
    //OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
    type : 'GET',//请求类型
    url : 'https://apis.map.qq.com/ws/district/v1/list?key=你的key&output=jsonp&callback=?',//请求地址，这里的key参数需要自行注册获取应用key，注册地址（https://lbs.qq.com/webservice_v1/guide-region.html）
    data : '',//请求数据，String型
    async : true,//是否为异步
    cache : false,//是否缓存
    dataType:'jsonp',//指定jsonp类型   
    success : function(data){
        var json = data['result'][0];
        var provinceHtml = "<option value=''>请选择省份</option>";
        $.each(json, function(idx, obj) {
            provinceHtml += "<option value="+obj.fullname+" province-id="+obj.id+">"+obj.fullname+"</option>";
        });
        $('#province').html(provinceHtml);
    }
});
 
//点击省份填充城市
$('#province').click(function(){
    var provinceId = $('#province').find("option:selected").attr('province-id');
    $.ajax({
        type : 'GET',//请求类型
        url : 'https://apis.map.qq.com/ws/district/v1/getchildren?key=你的key&id='+provinceId+'&output=jsonp&callback=?',//请求地址
        data : '',//请求数据，String型
        async : true,//是否为异步
        cache : false,//是否缓存
        dataType:'jsonp',//指定jsonp类型   
        success : function(data){
            var json = data['result'][0];
 
            var provinceHtml;
            $.each(json, function(idx, obj) {
                provinceHtml += "<option value="+obj.fullname+">"+obj.fullname+"</option>";
            });
            $('#city').html(provinceHtml);
        }
    });
})
 
</script>

    <script>
    //填充省份
    $.ajax({
        //OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
        type : 'GET',//请求类型
        url : 'https://apis.map.qq.com/ws/district/v1/list?key=你的key&output=jsonp&callback=?',//请求地址，这里的key参数需要自行注册获取应用key，注册地址（https://lbs.qq.com/webservice_v1/guide-region.html）
        data : '',//请求数据，String型
        async : true,//是否为异步
        cache : false,//是否缓存
        dataType:'jsonp',//指定jsonp类型   
        success : function(data){
            var json = data['result'][0];
            var provinceHtml = "请选择省份";
            $.each(json, function(idx, obj) {
                provinceHtml += ""+obj.fullname+"";
            });
            $('#province').html(provinceHtml);
        }
    });

    //点击省份填充城市
    $('#province').click(function(){
        var provinceId = $('#province').find("option:selected").attr('province-id');
        $.ajax({
            type : 'GET',//请求类型
            url : 'https://apis.map.qq.com/ws/district/v1/getchildren?key=你的key&id='+provinceId+'&output=jsonp&callback=?',//请求地址
            data : '',//请求数据，String型
            async : true,//是否为异步
            cache : false,//是否缓存
            dataType:'jsonp',//指定jsonp类型   
            success : function(data){
                var json = data['result'][0];

                var provinceHtml;
                $.each(json, function(idx, obj) {
                    provinceHtml += ""+obj.fullname+"";
                });
                $('#city').html(provinceHtml);
            }
        });
    })

    </script>