Home > Article > Web Front-end > jQuery jsp realizes the three-level linkage effect of provinces, cities and counties (with source code)_jquery

jQuery jsp realizes the three-level linkage effect of provinces, cities and counties (with source code)_jquery

WBOYOriginal: 2016-05-16 15:27:421993browse

The example in this article describes how jQuery jsp achieves the three-level linkage effect of provinces, cities and counties. Share it with everyone for your reference, the details are as follows:

Here, MySQL database is used to store information on all provinces, cities, counties and regions in the country (click here to download the source code )

Used jar packages

google’s Gson.jar
mysql-connector-java-5.1.13-bin.jar

Post the experimental picture:

Display page 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>

Database interaction 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);
 }
}

I hope this article will be helpful to everyone in jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief analysis of jQuery Mobile's initialization events_jqueryNext article：A brief analysis of jQuery Mobile's initialization events_jquery

See more

jQuery jsp realizes the three-level linkage effect of provinces, cities and counties (with source code)_jquery

Related articles