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

本文实例讲述了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程序设计有所帮助。