Jquery省市县三级联动
2012-05-18 09:34
375 查看
在这里,用MySQL数据库存储了全国所有的省市县地区信息
源代码下载
使用过的jar包
google的Gson.jar
mysql-connector-java-5.1.13-bin.jar
将实验图贴出来:
显示页面index.jsp
数据库交互GetDropdownDataServlet
源代码下载
使用过的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.city-picker 实现省市区三级联动
- Jquery实现省市二级三级联动Json
- jQuery实现的省市县三级联动菜单效果完整实例
- asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- 省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- jquery读取xml文件实现省市县三级联动的方法
- jquery全国省市县三级联动
- select 无限级联动。省市县三级联动。jquery插件
- 省市区县三级联动JAVA+MySQL+JQuery
- 中国省市区地址三级联动jQuery插件 Distpicker
- 省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- jquery实现省市县三级联动的jQuery插件
- 省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- jQuery实现省市县三级联动菜单
- 省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- jquery读取xml文件实现省市县三级联动
- jquery全国省市县三级联动
- jQuery实现省市县三级联动菜单
- 省市区三级联动[JSON+Jquery]