实现效果

频道信息

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. python-pyppeteer模块使用汇总

    一.简单代码示例 import asyncio from pyppeteer import launch async def main(): browser = await launch() page ...

  2. RandomAccessFile（）实现用户注册功能, 新增，查询，更新

    package seday03.raf;import java.io.IOException;import java.io.RandomAccessFile;import java.util.Arra ...

  3. flutter_inner_drawer 使用

    版本: flutter_inner_drawer: "^0.2.2" github:  https://github.com/Dn-a/flutter_inner_drawer 这 ...

  4. 验证码无法正常显示，提示Could not initialize class sun.awt.X11GraphicsEnvironment

    在Web开发中使用验证码时可能遇到的问题:java.lang.NoClassDefFoundError: Could not initialize class sun.awt.X11GraphicsE ...

  5. HTTPS请求处理

    HTTPS请求的时候: [1]证书是受信任的,什么都不用做 [2]证书是不受信任的,是自签名的 (1)修改配置文件,禁用ATS特性 (2)信任并安装数字证书 NSURLSession的示例代码如下: ...

  6. git submodule git 子模块管理相关操作

    Git 子模块操作相关的一些命令备忘: # 当使用git clone下来的工程中带有submodule时,初始的时候 submodule的内容并不会自动下载下来的,需执行如下命令: git submo ...

  7. jira添加工作流

  8. Python入门基础学习(文件与异常处理)

    Python基础学习笔记(七) 捕获异常的语法格式: 文件的基本操作: 打开文件 读.写文件 关闭文件 read方法 --读取文件: open函数的第一个参数是要打开的文件名(文件名区分大小写) 如果 ...

  9. [BZOJ1042]AOI2008]硬币购物

    题目描述 Description 硬币购物一共有4种硬币.面值分别为\(c_1\) ,\(c_2\) ,\(c_3\) ,\(c_4\) .某人去商店买东西,去了\(tot\) 次.每次带\(d_i\ ...

  10. nginx--代理和负载均衡

    nginx代理 nginx的代理分为正向代理和反向代理 正向代理指的是,一个位于客户端和原始服务器之间的服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原 ...