老师看一下,一级频道可以显示,但二级频道不能显示
来源:3-8 实现二级联动菜单-2
慕沐3362990
2019-12-05 16:07:14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
"url":"/ajax4/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":"/ajax4/channel",
"data":{"level":"2","parent":parent},
"dataType":"json",
"type":"get",
"success":function(json){
console.log(json);
for (var i = 0; i <json.length ; i++) {
var ch=json[i];
$("#lv2").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>
</body>
</html>
package com.imooc.channel;
import com.alibaba.fastjson.JSON;
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 java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import static com.alibaba.fastjson.JSON.toJSONString;
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String level=request.getParameter("level");
String parent=request.getParameter("parent");
List clist=new ArrayList();
if (level.equals("1")){
clist.add(new Channel("ai", "前沿/区块链/人工智能"));
clist.add(new Channel("web", "前端/小程序/js"));
} else if (level.equals("2")) {
if (parent.equals("ai")) {
clist.add(new Channel("misro","微服务"));
clist.add(new Channel("blockchain", "区块链"));
clist.add(new Channel("other", "..."));
} else if (parent.equals("web")) {
clist.add(new Channel("html", "HTML"));
clist.add(new Channel("css", "CSS"));
clist.add(new Channel("other", "..."));
}
}
String json= JSON.toJSONString(clist);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
}
package com.imooc.channel;
public class Channel {
private String code;
private String name;
public Channel(String code, String name) {
this.code = code;
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
1回答
好帮手慕小班
2019-12-05
同学你好,出现错误的原因是,在一级菜单的写入时,没有将value值具体写入option标签中,导致二级菜单获取时,对应条件不成立,例如:
将ch.code字符写入option标签中的value属性值,对应获取这个option标签时,就是ch.code,例如
对应在servlet中条件不成立,就没有返回值
建议将code的value值以字符串拼接的形式写入option标签中
如果我的回答解决了你的疑惑,请采纳!祝学习愉快!
相似问题
回答 4