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

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

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

此处将用到腾讯位置服务API接口（.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-WPB77type : 'GET',//请求类型url : '=你的key&output=jsonp&callback=?',//请求地址，这里的key参数需要自行注册获取应用key，注册地址（.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 : '=你的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>