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

2019-11-20 11:05:03

字体：大中小

来源：转载

供稿：网友

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

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

使用过的jar包

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

将实验图贴出来：

显示页面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程序设计有所帮助。

上一篇：浅析jQuery Mobile的初始化事件

下一篇：jQuery移动web开发中的页面初始化与加载事件