【JavaWeb】实现二级联动菜单

Myth丶恋晨 2023-06-01 11:11 142阅读 0赞

## 实现效果 ##

![%E4%BA%8C%E7%BA%A7%E8%81%94%E5%8A%A8%E8%8F%9C%E5%8D%95%E6%95%88%E6%9E%9C.gif][E4_BA_8C_E7_BA_A7_E8_81_94_E5_8A_A8_E8_8F_9C_E5_8D_95_E6_95_88_E6_9E_9C.gif]

## 频道信息 ##

package demo; public class Channel { private String code; //频道编码 private String name; //频道名称 public Channel() { } public Channel(String code, String name) { super(); 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; } }

## Servlet提供数据 ##

package demo; 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("/ch_content") 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"); //获取频道，1为父类频道，2为子类频道 String parent = request.getParameter("parent"); //获取父类频道code，以便于加载子类频道信息 List<Channel> 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", "...")); } } String json = JSON.toJSONString(chlist); response.setContentType("text/html;charset=utf-8"); response.getWriter().println(json); } }

## Ajax请求数据 ##

<!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/ch_content", "type" : "get", "data" : {"level" : "1"}, "dataType" : "json", "success" : function(json){ var html = ""; for(var i = 0; i < json.length; i++){ html += "<option value='" + json[i].code + "'>" + json[i].name + "</option>"; } $("#lv1").append(html); } }) }) //联动子类频道的数据 $(function(){ $("#lv1").change(function(){ var parent = $(this).val(); //获取当前选项的value值 $.ajax({ "url" : "/ajax/ch_content", "type" : "get", "data" : {"level" : "2", "parent" : parent}, "dataType" : "json", "success" : function(json){ var html = ""; $("#lv2>option").remove(); for(var i = 0; i < json.length; i++){ html += "<option value='" + json[i].code + "'>" + json[i].name + "</option>"; } $("#lv2").append(html); } }) }) }) </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>

转载于:https://www.cnblogs.com/huowuyan/p/11298974.html

[E4_BA_8C_E7_BA_A7_E8_81_94_E5_8A_A8_E8_8F_9C_E5_8D_95_E6_95_88_E6_9E_9C.gif]: https://raw.githubusercontent.com/huowuyan/cloudimg/master/blog/%E4%BA%8C%E7%BA%A7%E8%81%94%E5%8A%A8%E8%8F%9C%E5%8D%95%E6%95%88%E6%9E%9C.gif