省市二級聯動--使用app-jquery-cityselect.js外掛程式

標籤：url   lis   adc   div   編寫   載入   form   str   nbsp   

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

 嵌入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）

 

 請求成功後的效果如。

 

省市二級聯動--使用app-jquery-cityselect.js外掛程式