效果圖

• 點選切換城市出現兩級聯動，因為這裡選擇的是城市，所以沒有選擇地區

• 點選確認即會獲取使用者選擇的城市，然後通過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資源的連結：