老师看一下,一级频道可以显示,但二级频道不能显示

来源: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标签中,导致二级菜单获取时,对应条件不成立,例如:

http://img.mukewang.com/climg/5de8d5410912e79107350051.jpg

将ch.code字符写入option标签中的value属性值,对应获取这个option标签时,就是ch.code,例如

http://img.mukewang.com/climg/5de8d5f90918e74c07340132.jpg

对应在servlet中条件不成立,就没有返回值

http://img.mukewang.com/climg/5de8d61409d5953107150413.jpg

建议将code的value值以字符串拼接的形式写入option标签中

http://img.mukewang.com/climg/5de8d65109c7b62d08330122.jpg

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

0

0 学习 · 10204 问题

查看课程