省市二级联动--使用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

省市二级联动--使用app-jquery-cityselect.js插件

加载省份为内蒙古的地级市数据:${aapi}/area/city/" + provinceId(传入内蒙古的id)

省市二级联动--使用app-jquery-cityselect.js插件

请求成功后的效果如下图。

省市二级联动--使用app-jquery-cityselect.js插件

上一篇:如何在winform或者wpf里面打开浏览器并设置宽高位置


下一篇:【技巧汇总】eclipse中如何跳转到指定行