省市二级联动--使用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)
请求成功后的效果如下图。
省市二级联动--使用app-jquery-cityselect.js插件的更多相关文章
- jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...
- 省市二级联动(原生JS)
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- jQuery_完成省市二级联动
当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...
- 微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...
- JavaScript 实现省市二级联动
JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
- jQuery.cookie.js插件了解及使用方法
jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...
- 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图: 这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
随机推荐
- VS2005--设置Release模式下调试
今天初略看了下,所谓Release和Debug只是大家和编译器约定的一些生成规则而已,所以调试是无所谓Release和Debug的,只是由于生成的规则不同,可能Release的一些调试结果没Debug ...
- 网站网址前的小logo
认识网页前小图标 1.能在浏览器标签.地址栏左边和收藏夹栏显示小图标的网站,其网站都是使用了其名称为"favicon.ico"图标文件,格式为ico格式,图标大小一般为16*16, ...
- 【java】基础中的杂乱总结(二)
1 内部类进阶 package package8; //原则:先用内部类写 之后由于内部类匿名无法引用 用其继承的父类或实现的接口名 //再复写所有的抽象方法即可(是所有,否者还是抽象的,无法创建对象 ...
- MySQL 常用基础命令
一.启动与关闭 1.1 Linux下启动mysql 的命令: a. rpm包安装:service mysqld start b. 源码包安装:/usr/local/mysql/bin/mysqld_s ...
- jdk,tomcat配置
方法/步骤 一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. 2. ...
- SonarQube代码质量管理平台比较好的搭建和使用资料
http://www.voidcn.com/blog/lidujun1028/article/p-3831235.html Sonar (SonarQube)是一个开源平台,用于管理源代码的质量. ...
- Linux学习 -- 系统管理
1 进程管理 判断服务器健康状态 top [选项] 查看系统中所有进程 ps aux BSD格式 ps -le Linux格式 pstree [选项] -p 显示PID - ...
- HDU - 1865 1string(大数)
题目链接:http://acm.hust.edu.cn/vjudge/contest/121397#problem/F http://acm.hdu.edu.cn/showproblem.php?pi ...
- swift(2)元祖(Tuple)
let somePoint = (, ) switch somePoint { , ): // 位于远点 println("(0, 0) is at the origin") ): ...
- PHP 常识
PHP常识 1.谈谈你对MVC的认识,介绍几种目前比较流行的框架 由Model(M),View(V),Cntroller(C) 组成的一种设计模式,Model 主要处理一些业务处理类,View是页面显 ...