一、实现目的：

如标题所述，通过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实现中国行政区域上下联动选择地址的更多相关文章

  1. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  2. 纯js异步无刷新请求(只支持IE)【原】

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  3. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  4. java解析中国行政区域并在页面显示实现动态逐级筛选

    一.实现目标 首先会有一个存放中国行政区域数据的一个txt文件,用java读取并解析出来,并在页面上通过下拉框的形式展示出来.实现效果如下图,当选择完省份后,在选择该省份下的城市,然后在选择该城市下的 ...

  5. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  6. [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...

  7. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  8. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  9. JavaScript--动态添加元素（纯js书写table并删除数据）

    本文是对上一篇博文的扩展,用js书写表格,并添加和删除数据,详细代码解释见代码页. 对于文中使用的script脚本函数,下载地址如下:https://pan.baidu.com/s/13OFnj7nc ...

随机推荐

  1. upgrade to ubuntu14.04, ibus input

    升级后ibus拼音输入很奇怪,可能和其他输入法产生混淆.解决很简单,只要打开终端输入 ibus-daemon -drx 不用重启或者登出问题便解决.

  2. QT学习（打个广告）

    最近全面学习QT与c++,希望同行能够指教,于是打算建个群QQ群:85439482,欢迎大家,本群主要专注于QT皮肤库积累,软件架构以及标准c++学习.

  3. 剑指Offer:解决难题时的三大方法

    1.画图 让抽象的东西变得直观生动起来.比如设计二叉树,链表,栈,队列这些数据结构时. 2.举例子 同样可以化抽象为直观.能够更清晰的展现思路.从例子归纳出一般做法. 3.分解 有时问题本身是比较复杂 ...

  4. python脚本基础总结

    1. 注释 ①单行注释:#单行注释 ②多行注释: ''' 三个单引号,多行注释符 ''' ③中文注释:#coding=utf-8 或者 #coding=gbk 2.输入输出 ① 输入:  3.0后的p ...

  5. JAVA 通过LDAP获取AD域用户及组织信息

    因为工作需求近期做过一个从客户AD域获取数据实现单点登录的功能,在此整理分享. 前提:用户可能有很多系统的情况下,为了方便账号的统一管理使用AD域验证登录,所以不需要我们的系统登录,就需要获取用户的A ...

  6. javascript 取整,取余数

    1.丢弃小数部分,保留整数部分 parseInt(5/2) 2 2.向上取整,有小数,则整数部分加1 Math.ceil(5/2) 3 3.四舍五入 Math.round(5/2) 3 4.向下取整 ...

  7. sql参数化查询in的参数

    private Query setParameter(Query query, Map<String, Object> map) { if (map != null) { Set<S ...

  8. try-catch-finally 引发的奇怪问题

    今天,发现我们的一个Windows Service无法正常停止,无奈之下只能杀了进程. 为了找到原因,我在本地进行调试,发现程序里用到了多线程,而代码正是卡在了workThread.Abort()语句 ...

  9. 在win7下将CapsLock按键变成esc

    我喜欢用vim来编辑,经常要按到esc,但是去按那个按键确实比较的远,而且CapsLock这个按键对我来说着实有些鸡肋,所以就想在win7上也能像ubuntu那样把capslock映射为esc,在网上 ...

  10. web.xml常用元素配置

    tomcat服务器: tomcat是一个WEB服务器,所有的j2ee WEB程序可以在此处运行. tomcat服务器是一个符合j2ee标准的WEB服务器.则J2ee的EJB程序无法在此处运行. 如果要 ...