实现效果

频道信息

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>

【JavaWeb】实现二级联动菜单的更多相关文章

  1. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  2. mobiscroll实现二级联动菜单

    mobiscroll是一款非常使用的移动端选择控件,一般用来日期时间的选择的多,其实从官网上可以看到它有很多方面的使用,这里就不一一介绍了,有兴趣可以去官网上查阅一下 https://demo.mob ...

  3. angular二级联动菜单

    <!doctype html> <html lang="en" ng-app='App'> <head> <meta charset=&q ...

  4. JS简单实现二级联动菜单

    <form method="post" action=""> 省/市:<select id="province" onch ...

  5. JQuery EasyUI Combobox 实现省市二级联动菜单

    //编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...

  6. 使用Javascript来实现二级联动菜单的效果

    效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=[" ...

  7. 使用javascript中读取Xml文件做成的一个二级联动菜单

    [html] view plaincopy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  8. 一个asp+ACCESS省市二级联动菜单程序

    <%dim conndim connstron error resume nextconnstr="DBQ="+server.MapPath("test.mdb&q ...

  9. AngularJS中实现无限级联动菜单

    多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...

随机推荐

  1. css盒子布局,浮动布局以及显影与简单的动画

    08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left. ...

  2. JPA入门简介与搭建HelloWorld(附代码下载)

    场景 在学习JPA之前先来了解下JDBC与各大数据库的关系. 很久之前出现了很多数据库比如Mysql.Oracle.SqlServer.DB2等.这就导致了应用程序要连哪个数据库就要使用哪个数据库的A ...

  3. C#中实现文件重命名的方式

    场景 在C#中如果是删除文件的话可以直接使用 if (System.IO.File.Exists(fileName)) { System.IO.File.Delete(fileName); } 但是如 ...

  4. Java Web工程目录结构

    说明 介绍java web 工程的基本结构目录.记录java web 工程结构的学习. Java web 结构 java web严格来说分为两类工程结构:一个是工程编译目录结构,一个是工程发布目录结构 ...

  5. Windows 7下Node.js Web开发环境搭建笔记

    Node.js是什么? 我们看看百科里怎么说的?JavaScript是一种运行在浏览器的脚本,它简单,轻巧,易于编辑,这种脚本通常用于浏览器的前端编程,但是一位开发者Ryan有一天发现这种前端式的脚本 ...

  6. 如何用css实现弧度圆角?三角形以及圆形

    用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border ...

  7. docker swarm 删除节点

    有时临时在 docker swarm 集群上增加节点,过后需要删除节点 # 获取 node 信息 docker node ls ID HOSTNAME STATUS AVAILABILITY MANA ...

  8. idea tomcat debug不能启动的问题

    显示:Connected to the target VM, address: '127.0.0.1:54692', transport: 'socket' 其实原因是没调整好面板.晕 ...

  9. 解决 eclipse出现 Address already in use: bind，以及tomcat端口占用

    在项目开发中,有时候我们发现回报这个错:解决 eclipse出现 Address already in use: bind 产生的原因是端口占用,比如你的8080端口,已经有一个进程在访问使用,但是你 ...

  10. js ajax设置和获取自定义header信息的方法总结

    目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...