纯JS实现中国行政区域上下联动选择地址
一、实现目的：
如标题所述，通过JS来实现地址的选取，上一篇博客介绍的方式是通过java读取txt资源文件来实现地址的选择，通过ajax方式访问服务器实现省市区联动。此篇中将介绍如何使用JS实现相同功能。
相比上一篇的那种方式，这种方式在选择地址的时候不用跟服务器交互，效率更高些。
二、资源文件
要实现地址选取当然也需要存放着区域的资源文件。相关JS文件(region_select.js)的下载地址(网盘)：https://yunpan.cn/cqLRBjRw45EzZ 提取码：bb2a
三、代码实现
1. 前台页面；在JSP上使用简单html标签，然后引入相关资源文件即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中国行政区域联动选择</title>
</head>
<style>
.areainput1{width: auto; margin-right: 5px;}
body div{margin-top: 10px;margin-left: 5px;}
</style>
<body>
<form action="save.action" method="post">
<div id="div_province">
<select name="add_p" id="add_p" class="areainput" value="" ></select>
<select name="add_c" id="add_c" class="areainput" value="" ></select>
<select name="add_a" id="add_a" class="areainput" value=""></select>
</div>
<div><input type="submit" value="提交"/></div>
</form> <script charset="utf-8" src="js/region_select.js"></script>
<script type="text/javascript">
new PCAS('add_p','add_c','add_a' ,'天津市','天津市','河东区'); //这是初始化
//如果数据库里已经存了某个地址，PCAS方法的后面三个参数可以用JSTL标签输出即可
</script>
</body>
</html>
页面效果如下图所示：
2. 后台Action接收参数(以使用了strut2框架为例)
public class ThirdpartyConfigAction extends BaseAction{
private String add_p;
private String add_c;
private String add_a;
/*
* get/set方法此处省略...
*/
//当页面提交后，strut会自动将成员变量复制，页面上选中的省、市、区就会存到对应变量里面
public String save(){
//调用DAO方法，保存数据
}
}
三、总结
这种实现方式就特别简单，具体JS是怎么实现的可以不用管它，学会使用即可，有时间和兴趣可以自己研究，此为实际工作中使用到的，为方便以后项目中再次用到故记录下来，以便以后查阅。
other:
这里推荐一个编辑器HBuilder，写html/jsp很方便，样式JS方法都有提示，挺好用的。
纯JS实现中国行政区域上下联动选择地址的更多相关文章
- 纯js异步无刷新请求(只支持IE)
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
- 纯js异步无刷新请求(只支持IE)【原】
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
- java解析中国行政区域并在页面显示实现动态逐级筛选
一.实现目标 首先会有一个存放中国行政区域数据的一个txt文件,用java读取并解析出来,并在页面上通过下拉框的形式展示出来.实现效果如下图,当选择完省份后,在选择该省份下的城市,然后在选择该城市下的 ...
- 纯JS Web在线可拖拽的流程设计器
F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...
- [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技
好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...
- baguetteBox.js响应式画廊插件(纯JS)
baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...
- 纯js分页代码(简洁实用)
纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...
- JavaScript--动态添加元素（纯js书写table并删除数据）
本文是对上一篇博文的扩展,用js书写表格,并添加和删除数据,详细代码解释见代码页. 对于文中使用的script脚本函数,下载地址如下:https://pan.baidu.com/s/13OFnj7nc ...
随机推荐
- ubuntu12.04下一个简单的conky安装
这个conky用一些漂亮的圆圈来显示cpu,时钟,内存,交换空间,硬盘信息,网络及天气信息(不需要登陆任何网站噢).而且,提供多种色彩方案供选择,带发行版标记(fedora,mint,debian,o ...
- openlayers
很久没有写东西了,最近突然想看看地图,就翻看了下,用了2-3周时间看看网页,学习做了下:先看做的效果:
- c++学习--继承与派生
继承和派生 1 含有对象成员(子对象)的派生类的构造函数,定义派生类对象成员时,构造函数的执行顺序如下: 1 调用基类的构造函数,对基类数据成员初始化: 2 调用对象成员的构造函数,对对象成员的数据成 ...
- .NET程序集的编译目标平台：X86 &AnyCPU &X64
在我们测试平台上发布客户端组件,经常会碰到因为build的版本是x86还是anycpu而引起的application error的问题.借此,研究了一下X86,X64,AnyCPU的区别. 使用.ne ...
- opendove中的odgw所需要的内核模块
最近组里要做opendove相关的东西,需要odgw的一个kernel-module. 以前安装过,但备份不见了,在此做个链接备忘 : https://git.opendaylight.org/ger ...
- Android真机访问PC端服务器
若电脑联网: 1.开启一个无线网(以猎豹免费wifi为例) 2.手机连接上这个无线网(这样手机和电脑就在一个局域网内了) 3.此时查看手机的ip地址(我的是192.168.19 ...
- 9.3 js基础总结3
2.后增量/后减量运算符 ++,-- var i = 10; var a = i++; // i = i + 1; alert(a); 3.比较运算符(>,<,>=,<=,== ...
- Jenkins+Jmeter+Ant接口持续集成
修改时间 修改内容 修改人 2016.5.22 创建 刘永志 2016.6.15 完成 刘永志 前言: 为什么要用Jmeter做接口测试: 当选择这套方案的时候,很多人会问,为什么选择Jmeter做C ...
- zepto的touch模块解决click延迟300ms问题以及点透问题的详解
大家都知道移动端的click事件会延迟300ms触发,这时大家可以使用zepto的touch模块,里面定义了一个tap事件,通过绑定tap事件,可以实现点击立即触发的功能. 那么,它的tap事件是怎么 ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...