纯JS实现中国行政区域上下联动选择地址

一、实现目的:

如标题所述,通过JS来实现地址的选取,上一篇博客介绍的方式是通过java读取txt资源文件来实现地址的选择,通过ajax方式访问服务器实现省市区联动。此篇中将介绍如何使用JS实现相同功能。

相比上一篇的那种方式,这种方式在选择地址的时候不用跟服务器交互,效率更高些。

 

二、资源文件

要实现地址选取当然也需要存放着区域的资源文件。相关JS文件(region_select.js)的下载地址(网盘):https://yunpan.cn/cqLRBjRw45EzZ  提取码:bb2a

 

三、代码实现

1. 前台页面;在JSP上使用简单html标签,然后引入相关资源文件即可。

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>中国行政区域联动选择</title>
 6     </head>
 7     <style>
 8         .areainput1{width: auto; margin-right: 5px;}
 9         body div{margin-top: 10px;margin-left: 5px;}
10     </style>
11     <body>
12         <form action="save.action" method="post">
13             <div id="div_province">
14                 <select name="add_p" id="add_p" class="areainput" value="" ></select>                                                    
15                 <select name="add_c" id="add_c" class="areainput" value="" ></select>                
16                 <select name="add_a" id="add_a" class="areainput" value=""></select>
17             </div>
18             <div><input type="submit" value="提交"/></div>
19         </form>
20         
21         <script charset="utf-8" src="js/region_select.js"></script>
22         <script type="text/javascript">
23             new PCAS('add_p','add_c','add_a' ,'天津市','天津市','河东区'); //这是初始化
24             //如果数据库里已经存了某个地址,PCAS方法的后面三个参数可以用JSTL标签输出即可
25         </script>
26     </body>
27 </html>
复制代码

页面效果如下图所示:

 

 

2. 后台Action接收参数(以使用了strut2框架为例)

复制代码
 1 public class ThirdpartyConfigAction extends BaseAction{
 2     private String add_p;
 3     private String add_c;
 4     private String add_a;
 5     
 6     /*
 7      * get/set方法此处省略...
 8      */
 9 
10     //当页面提交后,strut会自动将成员变量复制,页面上选中的省、市、区就会存到对应变量里面    
11     public String save(){
12         
13         //调用DAO方法,保存数据
14     }
15 }
复制代码

 

三、总结

这种实现方式就特别简单,具体JS是怎么实现的可以不用管它,学会使用即可,有时间和兴趣可以自己研究,此为实际工作中使用到的,为方便以后项目中再次用到故记录下来,以便以后查阅。

 

 

other:

这里推荐一个编辑器HBuilder,写html/jsp很方便,样式JS方法都有提示,挺好用的。

posted @   穷苦书生  阅读(5393)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 一文读懂知识蒸馏
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
点击右上角即可分享
微信分享提示