演示效果如下
需要实现的条件如下：
一个html页面
一个servlet
一个javabean
如下：
javaBean
public class Channel {
private String name;
private String code;
public Channel() {
}
public Channel(String code, String name) {
this.name = name;
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
}
servlet
@WebServlet("/chan")
public class ChannelServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@SuppressWarnings({ "unchecked", "rawtypes" })
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String level = req.getParameter("level");
String parent = req.getParameter("parent");
List list = new ArrayList<Channel>();
if (level.equals("1")) {
list.add(new Channel("hubei", "湖北省"));
list.add(new Channel("shandong", "山东省"));
} else if (level.equals("2")) {
if (parent.equals("hubei")) {
list.add(new Channel("hubei_1", "武汉市"));
list.add(new Channel("hubei_2", "宜昌市"));
list.add(new Channel("hubei_3", "黄石市"));
} else if (parent.equals("shandong")) {
list.add(new Channel("shandong_1", "济南市"));
list.add(new Channel("shandong_2", "青岛市"));
list.add(new Channel("shandong_3", "淄博市"));
}
} else if (level.equals("3")) {
if (parent.equals("hubei_1")) {
list.add(new Channel("hubei_1_1", "江岸区"));
list.add(new Channel("hubei_1_2", "江汉区"));
list.add(new Channel("hubei_1_3", "武昌区"));
} else if (parent.equals("hubei_2")) {
list.add(new Channel("hubei_2_1", "宜都市"));
list.add(new Channel("hubei_2_2", "当阳市"));
list.add(new Channel("hubei_2_3", "枝江市"));
} else if (parent.equals("hubei_3")) {
list.add(new Channel("hubei_3_1", "阳新县"));
list.add(new Channel("hubei_3_2", "大冶市"));
} else if (parent.equals("shandong_1")) {
list.add(new Channel("shandong_1_1", "历下区"));
list.add(new Channel("shandong_1_2", "市中区"));
list.add(new Channel("shandong_1_3", "天桥区"));
} else if (parent.equals("shandong_2")) {
list.add(new Channel("shandong_2_1", "市南区"));
list.add(new Channel("shandong_2_2", "市北区"));
list.add(new Channel("shandong_2_3", "城阳区"));
} else if (parent.equals("shandong_3")) {
list.add(new Channel("shandong_3_1", "张店区"));
list.add(new Channel("shandong_3_2", "临淄区"));
}
}
String json =JSON.toJSONString(list);
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().println(json);
}
}
html
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<select id="lv1" style="width: 200px;height: 30px;">
<option selected="selected">请选择</option>
</select>
<select id="lv2" style="width: 200px;height: 30px;"></select>
<select id="lv3" style="width: 200px;height: 30px;"></select>
</body>
<script type="text/javascript">
//初始加载函数
$(function() {
$.ajax({
"url" : "/channel3/chan",
"type" : "get",
"data" : {
"level" : "1"
}, //传递的参数
"dataType" : "json", //服务器返回的也是json字符串
"success" : function(json) { //现在获得的是json对象
for (var i = 0; i < json.length; i++) {
var ch = json[i];
$("#lv1").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
},
//入参包含ajax请求对象XmlHttpeRequest，错误的文本
"error" : function(xmlhttp, errorText) {
console.log(xmlhttp);
console.log(errorText);
if (xmlhttp.status == '405') {
alert("无效的请求");
} else if (xmlhttp.status == '404') {
alert("未找到资源");
} else if (xmlhttp.status == '500') {
alert("服务器内部错误");
} else {
alert("产生异常");
}
}
});
});
$(function() {
$("#lv1").change(function() {
var lv1 = $(this).val();
console.log(lv1);
$.ajax({
"url" : "/channel3/chan",
"type" : "get",
"data" : {
"level" : "2",
"parent" : lv1
}, //传递的参数
"dataType" : "json", //服务器返回的也是json字符串
"success" : function(json) { //现在获得的是json对象
$("#lv2>option").remove(); //将lv2下拉框清除
$("#lv3>option").remove(); //将lv2下拉框清除
for (var i = 0; i < json.length; i++) {
var ch = json[i];
$("#lv2 ").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
var lv2 = $("#lv2").val();
console.log(lv2);
$.ajax({
"url" : "/channel3/chan",
"type" : "get",
"data" : {
"level" : "3",
"parent" : lv2
}, //传递的参数
"dataType" : "json", //服务器返回的也是json字符串
"success" : function(json) { //现在获得的是json对象
$("#lv3>option").remove(); //将lv2下拉框清除
for (var i = 0; i < json.length; i++) {
var ch = json[i];
$("#lv3").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
}
});
},
//入参包含ajax请求对象XmlHttpeRequest，错误的文本
"error" : function(xmlhttp, errorText) {
console.log(xmlhttp);
console.log(errorText);
if (xmlhttp.status == '405') {
alert("无效的请求");
} else if (xmlhttp.status == '404') {
alert("未找到资源");
} else if (xmlhttp.status == '500') {
alert("服务器内部错误");
} else {
alert("产生异常");
}
}
});
});
});
$(function() {
$("#lv2").change(function() {
var lv2 = $(this).val();
console.log(lv2);
$.ajax({
"url" : "/channel3/chan",
"type" : "get",
"data" : {
"level" : "3",
"parent" : lv2
}, //传递的参数
"dataType" : "json", //服务器返回的也是json字符串
"success" : function(json) { //现在获得的是json对象
$("#lv3>option").remove(); //将lv2下拉框清除
for (var i = 0; i < json.length; i++) {
var ch = json[i];
$("#lv3").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
},
//入参包含ajax请求对象XmlHttpeRequest，错误的文本
"error" : function(xmlhttp, errorText) {
console.log(xmlhttp);
console.log(errorText);
if (xmlhttp.status == '405') {
alert("无效的请求");
} else if (xmlhttp.status == '404') {
alert("未找到资源");
} else if (xmlhttp.status == '500') {
alert("服务器内部错误");
} else {
alert("产生异常");
}
}
});
});
});
</script>
资源下载地址：
https://download.csdn.net/download/cchulu/12203956
