省市定位（省市区三级联动插件Distpicker）
省市定位（省市区三级联动插件Distpicker）
效果图
- 点击切换城市出现两级联动，因为这里选择的是城市，所以没有选择地区
- 点击确认即会获取用户选择的城市，然后通过text（）将显示城市的地方进行替换； （注：刚开始使用replaceWith，但只能执行一次，选取城市后再次选取城市不再改变）
代码如下：
<div class="location "><div class="current_city" id="current_city"><i class="location_icon"></i>当前城市：<span class="city_name" id="cityName">北京市</span><div class="change_city_btn right" id="city_btn">[切换城市]</div></div><div data-toggle="distpicker" class="choose_city" id="distpicker"><select id="eprovinceName" data-province="-- 选择省 --" name="provinceName"></select><select id="ecityName" data-city="-- 选择市 --" name="cityName"></select><input type="button" value="确认" id="submit_city"><input type="button" value="取消" id="cancel_city"></div>
</div>$(function() {
//获取选择的城市,并将城市赋值给当前城市$("#submit_city").click(function(){var province = $("#eprovinceName").find("option:selected").text(); var city = $("#ecityName").find("option:selected").text(); $('#cityName').text(city);$('#distpicker').css('display','none');});//点击取消选择城市隐藏选择框$('#cancel_city').click(function(){$('#distpicker').css('display','none');})//点击切换城市显示城市选择框$('#city_btn').click(function(){$('#distpicker').css('display','block');})})简书中有写过三级联动以及插件Distpicker资源的链接：
省市区三级联动插件Distpicker