纯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 ...
随机推荐
- Url路径重写的原理
ASP.net的地址重写(URLRewriter)实现原理及代码示例 吴剑 2007-01-01 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 概述 访问 ...
- 不安装Oracle客户端情况下使用PL/SQL 远程连接数据库
附送PL/SQL Developer11中文版下载地址 1.先到Oracle网站下载Instant Client : http://www.oracle.com/technetwork/databas ...
- onethink入门笔记(一)
由于公司需求所以大概花了一个星期搞了一个一个基于onethink的数据管理平台demo不得不说onethink这个基于thinkphp3.2.3的框架还是很棒的 让我这个没基础过php的人也能在一星期 ...
- java后台访问接口
// 发送url地址获取信息 public static String sendPost(String jsonStr, String path) { String msg = "" ...
- 第一个ruby程序
老实说不是很喜欢去讨论ruby和python的对比,似乎总是把两个语言放在对立的位置上,我觉得没有必要,同样是动态语言,同样是解释型脚本语言,很多特性都是互相影响的,语言本身也在不断进化,我们更应该关 ...
- 使用spring通知时，代理出错
动态代理是基于接口的,spring配置是基于类的!!!!!!!!!! 注意:JDK的动态代理,只能对实现接口的类实现代理,生成代理对象,如果这个类没有实现接口,是生成不了代理对象的.如本例UserMa ...
- Android IOS WebRTC 音视频开发总结（八十二）-- VP8对VP9，质量还是码率？
本文主要介绍VP9(我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:blacke ...
- SQL Server提高事务复制效率优化（三）订阅初始化优化
初始化订阅主要是由分发代理分发和应用快照代理之前生成的快照,所以优化的主体是分发代理. 1.初始化订阅 首先在本地创建一个订阅,发布服务器.分发服务器和订阅服务器都在同一台服务器上,仅为了测试生产环境 ...
- const关键字也许该被替换为readonly
只读的变量,其值在编译时不能被使用,因为编译器在编译时不知道其存储的内容. const修饰的只读变量 const int Max = 100: int Array[Max] ; c文件中,编译 ...
- sql server2008安装说明 详细完整版
SQL Server 2008是一个重大的产品版本,它推出了许多新的特性和关键的改进,使得它成为至今为止的最强大和最全面的SQL Server版本. 在现今数据的世界里,公司要获得成功和不断发展,他们 ...