省市二级联动--使用app-jquery-cityselect.js插件
2024-10-18 19:29:31
只有省市二级联动,三级联动还没处理好,会尽快完善。
嵌入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)
请求成功后的效果如下图。
最新文章
- hashchange事件的认识
- 用微信小程序做H5游戏尝试
- Cannot install ubuntu or other linux flavours on citrix Xen server
- Smarty插件简单开发
- Git 一些日常使用积累
- POJ3278http://poj.org/problem?id=3278
- 【原创】batch-GD, SGD, Mini-batch-GD, Stochastic GD, Online-GD -- 大数据背景下的梯度训练算法
- SQLSERVER一些公用DLL的作用解释
- [转]Delphi 快捷键 让你更像高手!!
- 主席树套树状数组 动态区间第k小
- SQL 之 字符区别(转)
- LeetCode题解 | 215. 数组中的第K个最大元素
- JavaScript生成二维码图片
- 第26月第6天 selenium
- 记一次wepy里面的渲染问题(this.$apply()的使用)
- vue 去除前后空格trim
- Bow and Arrow Rigging in Blender
- 小程序通过用户授权获取手机号之getPhoneNumber
- android依据区域高度切割文本问题
- js_模块化
热门文章
- linux服务器之LVS、Nginx和HAProxy负载均衡器对比总结
- 在ASP.Net中";../"; ";./"; ";~/";表示的意思
- 【PHP伪静态】时获取不规则的URL参数
- php 常用的JS
- Notes over compiling..
- 将所需要的图标排成一列组成一张图片,方便管理。li的妙用
- UVALive 2521	Game Prediction 题解
- hdu_4897_Little Devil I(树链剖分)
- JavaBean-- 保存 范围
- c++ 显示调用dll