只有省市二级联动,三级联动还没处理好,会尽快完善。

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

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

最新文章

  1. hashchange事件的认识
  2. 用微信小程序做H5游戏尝试
  3. Cannot install ubuntu or other linux flavours on citrix Xen server
  4. Smarty插件简单开发
  5. Git 一些日常使用积累
  6. POJ3278http://poj.org/problem?id=3278
  7. 【原创】batch-GD, SGD, Mini-batch-GD, Stochastic GD, Online-GD -- 大数据背景下的梯度训练算法
  8. SQLSERVER一些公用DLL的作用解释
  9. [转]Delphi 快捷键 让你更像高手!!
  10. 主席树套树状数组 动态区间第k小
  11. SQL 之 字符区别(转)
  12. LeetCode题解 | 215. 数组中的第K个最大元素
  13. JavaScript生成二维码图片
  14. 第26月第6天 selenium
  15. 记一次wepy里面的渲染问题(this.$apply()的使用)
  16. vue 去除前后空格trim
  17. Bow and Arrow Rigging in Blender
  18. 小程序通过用户授权获取手机号之getPhoneNumber
  19. android依据区域高度切割文本问题
  20. js_模块化

热门文章

  1. linux服务器之LVS、Nginx和HAProxy负载均衡器对比总结
  2. 在ASP.Net中&quot;../&quot; &quot;./&quot; &quot;~/&quot;表示的意思
  3. 【PHP伪静态】时获取不规则的URL参数
  4. php 常用的JS
  5. Notes over compiling..
  6. 将所需要的图标排成一列组成一张图片,方便管理。li的妙用
  7. UVALive 2521 Game Prediction 题解
  8. hdu_4897_Little Devil I(树链剖分)
  9. JavaBean-- 保存 范围
  10. c++ 显示调用dll