jsp+jquery实现省市区三级联动下拉

不少系统都需要实现省市区三级联动下拉,像人口信息管理、电子商务网站、会员管理等,都需要填写地址相关信息。而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式。现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成。

最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级联动下拉,于是今天就花了一点时间结合jQuery框架来实现。

下面简单描述一下老k这次利用jsp+jquery实现省市区三级联动下拉的过程。

1.数据库准备

本实例使用的数据是MySQL,把demo.sql导入到数据库中即可。

2.Java后端

新建一个servlet,实现从数据库中读取数据,并把返回结果以json的格式输出到前端。要使用servlet,还需要在web.xml中进行配置。

3.jsp前端

调用jquery ajax方法调用servlet获取数据,前端利用json的相关js组件来把json字符串转换成js对象并循环生成下拉选项数据。为第一级和第二级下拉分别加上onchange事件。

到此已经大功告成,具体的代码可以下载本文java实例源码:jsp结合jquery实现省市区三级联动下拉源代码查看,下载后用myeclipse导入并部署到tomcat就可以访问项目看到效果了。程序比较容易扩展,如果数据齐全,实现n级联动下拉也是轻而易举的。

http://blog.csdn.net/kalision/article/details/39229953

http://pan.baidu.com/share/link?shareid=449587&uk=3288691396

用jsp实现省市区三级联动下拉的更多相关文章

  1. JQ与AJAX 省市区三级联动下拉框

    用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...

  2. JS(JQuery) 省市区三级联动下拉选择

    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...

  3. 项目总结01:JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  4. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  5. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  6. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  7. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  9. jquery+ligerform三级联动下拉框

    如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...

随机推荐

  1. SpringBoot非官方教程 | 第十篇: 用spring Restdocs创建API文档

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot10-springrestdocs/ 本文出自方志 ...

  2. 关于利用HashSet,split,deleteCharAt等方法详解

    1.首先了解一下HashSet的原理: Set接口  Set是对数学上集的抽象,Set中不包含重复的元素.如何界定是否是重复元素?Set最多可含一个null元素;对于任意的非null元素e1和e2,都 ...

  3. 肝题与oj

    oier很多,oj也很多,这些oj分别有怎样的特点,我们又该怎样选择呢?请各位客官听在下分解 (我主要说一些比较大众的oj) (注意:难度与界面友好度为个人意见,不喜勿喷) 1.入门级 1.NOIop ...

  4. mybatis <fireach> 拼接sql语句 org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: org.apache.ibatis.builder.BuilderException: Error evaluating expression 'in'. Cause:

    <select id="getUserIn" parameterType="QueryVo" resultMap="userMap"& ...

  5. node-zookeeper-dubbo 和egg实现远程连接

    基于js的node-zookeeper-dubbo 和egg实现远程连接服务 const nzd = require('node-zookeeper-dubbo'); const opt={ appl ...

  6. 揭开js之constructor属性的神秘面纱

    揭开 constructor 在 Javascript 语言中,constructor 属性是专门为 function 而设计的,它存在于每一个 function 的prototype 属性中.这个 ...

  7. 部署node api的二三事

    当接到node开发node api的时候,我就想用docker来部署,众所周知,node的版本更新迭代很快.很多以前需要babel后才能采用的方法正在不断被node 原生的支持.如果随便更换生产服务器 ...

  8. php使用file_get_contents 或者curl 发送get/post 请求 的方法总结

    file_get_contents模拟GET/POST请求 模拟GET请求: <?php $data = array( 'name'=>'zhezhao', 'age'=>'23' ...

  9. 10.1.5 Comment类型【JavaScript高级程序设计第三版】

    注释在DOM中是通过Comment 类型来表示的.Comment 节点具有下列特征: nodeType 的值为8: nodeName 的值为"#comment": nodeValu ...

  10. php获取客户端IP地址、所在地、操作系统、浏览器信息

    本实例主要实现获取客户端的IP,再根据获取的IP获取所在地,还可以获取用户当前电脑使用的操作系统以及用户是通过什么浏览器进行访问的. 您可以在这里查看具体演示和下载demo  http://www.j ...