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

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

此处将用到腾讯位置服务API接口（http://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 : 'http://apis.map.qq.com/ws/district/v1/list?key=你的key&output=jsonp&callback=?',//请求地址，这里的key参数需要自行注册获取应用key，注册地址（http://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 : 'http://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>