省市定位（省市区三级联动插件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