老师，我设置的三级，为什么不能直接显示出来？
来源：3-8 实现二级联动菜单-2
慕先生8145006
2019-10-08 20:40:07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
"url" : "/ajax/channel",
"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];
$("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
}
}
})
})
$(function(){
$("#lv1").on("change" , function(){
var parent = $(this).val();
console.log(parent);
$.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];
$("#lv2").append("<option value='" + ch.code +"'>" + ch.name + "</option>")
}
}
})
})
})
$(function(){
$("#lv2").on("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").remove();
for(var i = 0 ; i < json.length ; i++){
var ch = json[i];
$("#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">
<option selected="selected">请选择</option>
</select>
<select id="lv3" style="width:200px;height:30px"></select>
</body>
</html>
package com.imooc.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 {
String level = request.getParameter("level");
String parent = request.getParameter("parent");
List chlist = new ArrayList();
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("one" , "yi"));
}else if(parent.equals("html")) {
chlist.add(new Channel("two" , "er"));
}
}
String json = JSON.toJSONString(chlist);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
}
1回答
-
好帮手慕小班
2019-10-09
同学你好，这里的三级菜单是在二级菜单发生change事件时，也就是在选择某个选项时触发这个事件，此时三级菜单就可以展示
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题