实现效果

频道信息

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. 缓冲字符流 java.io.BufferedWriter ,java.io.BufferedReader,缓冲字符输出流:PrintWriter

    package seday07; import java.io.IOException;import java.io.PrintWriter; /*** @author xingsir * 缓冲字符流 ...

  2. arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  3. JS 错误

    JS 错误 try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. 错误一定会发生 当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错 ...

  4. 树莓派 raspbian Linux 系统命令行 快捷键

    在 Linux 下使用命令操作的时候,光标的移动令人头痛.命令输入完了,执行之后发现缺少权限,然后不得不移动光标到行首加 sudo,而命令又极长……当我学会了命令行相关的快捷键之后,不仅效率提高了,更 ...

  5. linux服务器下oracle开机自启动设置

    1.首先切换到Oracle用户 [oracle@oracletest ~]$ cd /u01/app/oracle/product/11.2.0/db_1/bin/       -----标红字体部分 ...

  6. 解决Flask和Django的错误“TypeError: 'bool' object is not callable”

    跟着欢迎进入Flask大型教程项目!的教程学习Flask,到了重构用户模型的时候,运行脚本后报错: TypeError: 'bool' object is not callable 这是用户模型: c ...

  7. MATLAB实例：为匹配真实标签，对训练得到的标签进行调整

    MATLAB实例:为匹配真实标签,对训练得到的标签进行调整 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. MATLAB程序 munkres.m ...

  8. go语言设计模式之Command

    package main import ( "fmt" ) type Command interface { Execute() } type ConsoleOutput stru ...

  9. go语言设计模式之adapter

    adapter.go package adapter import ( "fmt" ) type LegacyPrinter interface { Print(s string) ...

  10. 【CodeChef】December Challenge 2019 Div1 解题报告

    点此进入比赛 这次比赛本来想好好打的,但不幸的是,这周先是要认真复习准备月考,考完又是发烧在床上躺了一个周末,所以最终没能打完. 我还是好弱啊. \(T1\):Binary XOR(点此看题面) 大致 ...