实现效果

频道信息

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. 中文版 Apple 官方 Swift 教程《The Swift Programming Language》

    简介 欢迎使用 Swift 关于 Swift 版本兼容性 Swift 初见 Swift 版本历史记录 Swift 教程 基础部分 基本运算符 字符串和字符 集合类型 控制流 函数 闭包 枚举 类和结构 ...

  2. 用while循环写一个简单的猜数字游戏

    import random #练习:模拟猜数字的游戏 """ 计算机出一个1~100之间的随机数由人来猜 计算机根据人猜的数字分别给出 大一点/小一点/猜中了 的提示 & ...

  3. SQL 高效运行注意事项（三）

    合理配置tempdb 1.tempdb在SQL Server停掉,重启时会自动的drop,re-create. 根据model数据库会默认建立一个新的 2.tempdb对IO的要求比较高,最好分配到高 ...

  4. Python对Redis增删改查

    pip install redis import redis # 连接redis # 几个常用默认参数: # host='localhost', port=6379, db=0, decode_res ...

  5. s3c2440裸机-内存控制器(一、内存控制器的原理)

    1.内存接口概念 S3C2440是个片上系统,有GPIO控制器(接有GPIO管脚(GPA-GPH)),有串口控制器 (接有TXD RXD引脚),有memory controller内存控制器,有Nan ...

  6. MYSQL的备份与恢复--逻辑备份mysqldump

    目录 0.备份与恢复概述 1.逻辑备份-完整备份与恢复 2.逻辑备份-增量备份与恢复 (1)环境准备 (2)恢复全量数据 (3)恢复增量备份 3.新来的开发妹子删了库! (1)模拟环境准备 (2)全备 ...

  7. 【2019.8.20 NOIP模拟赛 T2】小B的树（tree）（树形DP）

    树形\(DP\) 考虑设\(f_{i,j,k}\)表示在\(i\)的子树内,从\(i\)向下的最长链长度为\(j\),\(i\)子树内直径长度为\(k\)的概率. 然后我们就能发现这个东西直接转移是几 ...

  8. Codeforces Round 596 题解

    万幸的是终于碰上了一场上分好场. 不幸的是一开始差点不会 A. 万幸的是想了个不那么稳的结论过了 pretest. 不幸的是罚时很高,而且慌得一比. 万幸的是然后半个小时内把 B 和 C 码了. 不幸 ...

  9. Python连载51-网络编程基础知识

    一.网络编程 1.网络.网络协议(一套规则) 2.网络模型: (1)七层模型-七层 物理层(比如网线.锚).数据链路层(比如电压电流).网络层.传输层.会话层.表示层.应用层(我们的活动基本都在这一层 ...

  10. 【Resharper】C# “Simplify conditional ternary expression”

    #事故现场: 对某个对象做空值检测的时候,结合三元运算符给某变量赋值的时候,R#提示:"Simplify conditional ternary expression" : R#建 ...