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

以上是 jQuery+jsp实现省市县三级联动效果(附源码) 的全部内容, 来源链接: utcz.com/z/330197.html

回到顶部