省市二級聯動--使用app-jquery-cityselect.js插件

 只有省市二級聯動，三級聯動還沒處理好，會盡快完善。

 嵌入id：

<div class="form-group">
     <label>地址</label>
     <p>從：</p>
        <div class="input-group">
           <input id="areaIdFrom" name="areaIdFrom" type="hidden" value="" /> 
 <input id="provinceFrom" name="provinceFrom" type="hidden" />
 <input id="cityFrom" name="cityFrom" type="hidden" />
           <div id="areaGroupFrom"></div>
        </div>
        <input type="text" class="form-control" name="addressFrom"/>
     <p>到：</p>
        <div class="input-group">
           <input id="areaIdTo" name="areaId" type="hidden" value="" /> 
 <input id="provinceTo" name="province" type="hidden" />
 <input id="cityTo" name="city" id="moveCity" type="hidden" />
           <div id="areaGroupTo"></div>
        </div>
        <input type="text" class="form-control" name="address" id="moveAddress"/>
</div>

編寫js：

<script type="text/javascript">
    var areaIdFrom = $("#areaIdFrom"); var provinceFrom = $("#provinceFrom"); var cityFrom = $("#cityFrom"); var areaIdTo = $("#areaIdTo"); var provinceTo = $("#provinceTo"); var cityTo = $("#cityTo"); $("#areaGroupFrom").cityselect({ loadProvince: handleLoadProvince, loadCity: handleLoadCity, onAreaIdChanged: function(id) { areaIdFrom.val(id); }, onProvinceChanged: function(id, name) { provinceFrom.val(name); }, onCityChanged: function(id, name) { cityFrom.val(name); } }); $("#areaGroupTo").cityselect({ loadProvince: handleLoadProvince, loadCity: handleLoadCity, onAreaIdChanged: function(id) { areaIdTo.val(id); }, onProvinceChanged: function(id, name) { provinceTo.val(name); }, onCityChanged: function(id, name) { cityTo.val(name); } });  function handleLoadProvince() { var list = []; $.HTTP.list({ url: "${aapi}/area/province", //${aapi}/area/province
            success: function(l) { list = l; } }); return list; } function handleLoadCity(provinceId) { var list = []; $.HTTP.list({ url: "${aapi}/area/city/" + provinceId, // ${aapi}/area/city/
            success: function(l) { list = l; } }); return list; }

</script>

 

加載省份數據：${aapi}/area/province

 

 加載省份為內蒙古的地級市數據：${aapi}/area/city/" + provinceId（傳入內蒙古的id）

 

 請求成功后的效果如下圖。