jQuery+jsp实现省市县三级联动效果(附源码)


Posted in Javascript onDecember 03, 2015

本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法。分享给大家供大家参考,具体如下:

在这里,用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码)

使用过的jar包

google的Gson.jar
mysql-connector-java-5.1.13-bin.jar

将实验图贴出来:

jQuery+jsp实现省市县三级联动效果(附源码)

显示页面index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <base href="<%=basePath%>"> 
 <title>省市区三级联动下拉菜单</title>
 <script type="text/javascript" src="<%=path %>/js/jquery/jquery-1.7.min.js"></script>
 <script type="text/javascript" src="<%=path %>/js/json/json-minified.js"></script>
 </head>
 <body>
 <table>
 <tr>
 <td>
 省份:
 <select name="province" id="province" onchange="onSelectChange(this,'city');"></select>
 城市:
 <select name="city" id="city" onchange="onSelectChange(this,'district');">
  <option value="">请选择</option>
 </select>
 区(县):
 <select name="district" id="district">
  <option value="">请选择</option>
 </select>
 </td>
 </tr>
 </table>
 </body>
</html>
<script type="text/javascript">
function onSelectChange(obj,toSelId){
 setSelect(obj.value,toSelId);
}
function setSelect(fromSelVal,toSelId){
 //alert(document.getElementById("province").selectedIndex);
 document.getElementById(toSelId).innerHTML="";
 jQuery.ajax({
  url: "<%=path%>/getDropdownDataServlet",
  cache: false,
  data:"parentId="+fromSelVal,
  success: function(data){
  createSelectObj(data,toSelId);
  }
 });
}
function createSelectObj(data,toSelId){
 var arr = jsonParse(data);
 if(arr != null && arr.length>0){
  var obj = document.getElementById(toSelId);
  obj.innerHTML="";
  var nullOp = document.createElement("option");
  nullOp.setAttribute("value","");
  nullOp.appendChild(document.createTextNode("请选择"));
  obj.appendChild(nullOp);
  for(var o in arr){
   var op = document.createElement("option");
   op.setAttribute("value",arr[o].id);
   //op.text=arr[o].name;//这一句在ie下不起作用,用下面这一句或者innerHTML
   op.appendChild(document.createTextNode(arr[o].name));
   obj.appendChild(op);
  }
 }
}
setSelect('1','province');
</script>

数据库交互GetDropdownDataServlet

public class GetDropdownDataServlet extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws IOException, ServletException {
  doPost(request, response);
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws IOException, ServletException {
  String parentId = request.getParameter("parentId");
  if (parentId == null || parentId == "") {
   parentId = "0";
  }
  Connection conn = null;
  String json = "";
  try {
   Class.forName("com.mysql.jdbc.Driver");
   conn = DriverManager.getConnection("jdbc:mysql://localhost/dropdown",
     "root", "root");
   Statement stat = conn.createStatement();
   ResultSet rs = stat
     .executeQuery("select region_id,region_name from region where parent_id = "
       + parentId);
   ArrayList rsList = new ArrayList();
   Map map = null;
   while (rs.next()) {
    map = new HashMap();
    map.put("id", rs.getInt(1));
    map.put("name", rs.getString(2));
    rsList.add(map);
   }
   rs = null;
   Gson gson = new Gson();
   json = gson.toJson(rsList);
   System.out.println("json=" + json);
  } catch (ClassNotFoundException e) {
   e.printStackTrace();
  } catch (SQLException e) {
   e.printStackTrace();
  } finally {
   if (conn != null) {
    try {
     conn.close();
    } catch (SQLException e) {
     e.printStackTrace();
    }
   }
  }
  response.setCharacterEncoding("UTF-8");
  response.getWriter().print(json);
 }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 #Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 #Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 #Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 #Javascript
详解JavaScript对象和数组
Dec 03 #Javascript
java必学必会之static关键字
Dec 03 #Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 #Javascript
You might like
url decode problem 解决方法
2011/12/26 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
javascript实现playfair和hill密码算法
2014/12/07 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
python多线程用法实例详解
2015/01/15 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
通过实例解析python描述符原理作用
2020/01/22 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
keras slice layer 层实现方式
2020/06/11 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
数据库测试通常都包括哪些方面
2015/11/30 面试题
导游实习生自荐书
2014/01/28 职场文书
女子职高个人自荐书
2014/02/01 职场文书
篮球赛口号
2014/06/18 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
个人债务授权委托书
2014/10/17 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2015年教研员工作总结
2015/05/26 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
MySQL慢查询的坑
2021/04/28 MySQL