三级联动问题
来源：3-8 实现二级联动菜单-2
jia_蛙
2019-11-19 16:01:53
package com.zhou.ajax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
/**
* Servlet implementation class ChannelServlet
*/
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ChannelServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取请求结果
//level：表示频道 parent：频道信息
String level = request.getParameter("level");
String parent = request.getParameter("parent");
//创建数组保存Channel对象
List<Channel> chlist = new ArrayList<Channel>();
//判断请求结果 设置数据
if(level.equals("1")) {
chlist.add(new Channel("ai","前沿/区域链/人工智能"));
chlist.add(new Channel("web","前端/小程序/JS"));
}else if(level.equals("2")) {
if(parent.equals("ai")) {
chlist.add(new Channel("micro","微服务"));
chlist.add(new Channel("blockchain","区域链"));
chlist.add(new Channel("other","..."));
}else if(parent.equals("web")) {
chlist.add(new Channel("html","HTML"));
chlist.add(new Channel("css","CSS"));
chlist.add(new Channel("other","..."));
}
}else if(level.equals("3")) {
if(parent.equals("micro")) {
chlist.add(new Channel("course","微服务第一季"));
}else if(parent.equals("blockchain")) {
chlist.add(new Channel("course","区域链第一季"));
}else if(parent.equals("html")) {
chlist.add(new Channel("course","html第一季"));
}else if(parent.equals("css")) {
chlist.add(new Channel("course","CSS第一季"));
}else if(parent.equals("other")) {
chlist.add(new Channel("course","...."));
}
}
//获取JSON字符串
String json = JSON.toJSONString(chlist);
//设置字符集
response.setContentType("text/thml;charset=utf-8");
//重定向
response.getWriter().println(json);
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>级联菜单</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//页面就绪函数： 用于获取有一级频道的数据 ps我们建议每一个页面就虚函数就是一个独立的功能
$(function(){
$.ajax({
//地址
"url" : "/ajax/channel",
//向服务器传递的参数 参数使用json格式传递
"data" : {"level" : "1"},
//请求类型
"type" : "get",
//数据反悔的格式
"dataType" : "json",
//接收响应处理的函数
"success" : function(json){
//console.log(json);//测试
for(var i = 0;i<json.length; i++){
var ch = json[i];
//往一级目录添加数据 ps 别忘记option还有一个value属性
$("#lv1").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
}
});
});
// 页面就绪函数：用于联动二级频道的数据
$(function(){
//绑定页面 使用change事件：表单的输入项内容出现变化的事件
$("#lv1").change(function(){
//获取当前选中的对象中的输入的值 也就是上面我们append添加的vlaue的值
var parent = $(this).val();
//console.log(parent);//前沿/区域链/人工智能
//当我们知道一级频道的code值后，我们就可以发送新的请求
$.ajax({
"url":"/ajax/channel",
"data":{"level":"2","parent" : parent},
"dataType":"json",
"type":"get",
"success":function(json){
//console.log(json);
//加载二级频道
//移除所有lv2下的原始option选项
$("#lv2>option").remove();
for(var i=0;i<json.length;i++){
var ch = json[i];
//往二级频道的下拉框中增加option选项
$("#lv2").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
}
});
});
});
//第三级联动
$(function(){
//为lv2绑定change事件
$("#lv2").change(function(){
//获取当前选中的对象中的输入的值
var parent = $(this).val();
console.log(parent);
//发送新的请求
$.ajax({
"url":"/ajax/channel",
"data":{"level":"3","parent" : parent},
"dataType":"json",
"type":"get",
"success":function(json){
//console.log(json);
//加载二级频道
//移除所有lv3下的原始option选项
$("#lv3>option").remove();
for(var i=0;i<json.length;i++){
var ch = json[i];
//往二级频道的下拉框中增加option选项
$("#lv3").append("<option value ='" + ch.code + "'>" + ch.name + "</option>");
}
}
})
})
});
</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>
</html>老师 我在之前代码的情况下修改了一下，改成三级联动，但是出现了几个问题： 1. 当第一次需选中一级菜单中的选项时，会加载二级菜单，但是第三级菜单加载不出来，之前刚学习js的 时候还可以在第二级菜单调用一下加载第三级菜单的方法，但这里都是使用页面就绪函数，没有方法名， 这里该怎么修改? 2. 当我们三个菜单都出现的时候，我们再次点击一级菜单的“请选择"选项，二级菜单可以清空，但是三级 菜单不能清空，我想这里可能也是因为获取不到二级菜单的改变，所以无法清空，这里我该怎么办
写回答
1回答
-
同学你好！
第一个问题，建议同学在每一级数据加载的前面都添加一个请选中，这样就没有默认的初始值了，也就不存在加载第三个的数据问题了
效果图：
代码：
点击请选择后触发了改变时间后，同学你可以在函数中判断一下选中的是否是“请选中”，如果是直接将第二和第三级的数据清除，如果不是“请选中”，则进行ajax请求查询下一级
根据上面的思路，同学在第二级选择请选中时，也可以清空第三级的内容
如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
1
相似问题