首先导入jquery的工具包。
jsp页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--ceshi--start -->
<p>
<select id="one1">
<option value="0">省</option>
</select>
<select id="one2">
<option value="0">市</option>
</select>
<select id="one3">
<option value="0">区</option>
</select>
</p>
<!--ceshi--end -->
</body>
<script src="./asset/jquery1.11.2/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
window.onload = function() {
$.ajax({
url : "/swjbweb/Test",
dateType : {
"contentType" : "application/json"
},
success : function(data) {
$("#one1").append(data);
}
})
};
$(function() {
$("#one1").change(function() {
$("#one2").empty();
$("#one3").empty();
$("#one2").append("<option value='0'>市</option>");
$("#one3").append("<option value='0'>区</option>");
var one1 = $("#one1").val();
$.ajax({
url : "/swjbweb/Test?keyword=" + one1,
dateType : {
"contentType" : "application/json"
},
success : function(data) {
$("#one2").append(data);
}
})
});
$("#one2").change(function() {
$("#one3").empty();
$("#one3").append("<option value='0'>市</option>");
var one2 = $("#one2").val();
$.ajax({
url : "/swjbweb/Test?keyword=" + one2,
dateType : {
"contentType" : "application/json"
},
success : function(data) {
$("#one3").append(data);
}
})
});
});
</script>
</html>
java代码:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String keyword = request.getParameter("keyword");
date = "";
//通过数据库获得classifyBO对象的list集合,略
for (int i = 0; i < classifyBOs.size(); i++) {
if (classifyBOs.get(i).getClassifyName() != null) {
String name = classifyBOs.get(i).getClassifyName().replace(".", "\\");
String name1 = Unicode.decodeUnicode(name);
classifyBOs.get(i).setClassifyName(name1);
date = "<option value='" + classifyBOs.get(i).getClassifyID() + "'>" + name1 + "</option>";
}
out.write(date);
}
} catch (
Exception e) {
LogUtil.exception(e);
}
}