实现效果

频道信息

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. PlayJava Day014

    今日所学: /* 2019.08.19开始学习,此为补档. */ 1.Random生成的随机数是伪随机数,因为只要两个Random对象的种子相同,而且方法的调用顺序也相同,则产生的随机数相同. Ran ...

  2. Oracle数据库之第一篇

    1 : Oracle 简介 : 是美国ORACLE公司(甲骨文)提供的以分布式数据库为核心的一组软件产品,是目前最流行的客户/服务器IP,端口,用户名.密码,点击:连接 (CLIENT/SERVER) ...

  3. Oracle备份、还原数据库

    备份数据库 创建备份目录(用sys账号),若已创建备份目录,此步可忽略 create directory db_bak as 'D:\ ECIMS_DB' --查看创建的目录 select * fro ...

  4. QT防止程序多次启动

    Question:最近在linux下作的一个项目,设置了crontab自启动,但是经常出现启动多个进程的原因,针对这种情况,我做了如下处理: QLockFile *lockFile = new QLo ...

  5. 【JDBC】C3P0连接池的使用

    C3P0连接池的c3p0-config.xml配置文件 <?xml version="1.0" encoding="UTF-8"?> <c3p ...

  6. android 获得一些设备信息的静态函数

    1.Brand,IMEI,DeviceOS,DeviceFactoryTime public static String getDeviceBrand(Context context) { Strin ...

  7. ArrayList的输出以及一些问题

    //首先需要创建一个ArrayList ArrayList arr=new ArrayList(); //然后往ArrayList里面插入一些值 arr.add("a"); arr ...

  8. qt qrc 资源文件

    qt  qrc 资源文件 qt  qrc 资源文件 qt  qrc 资源文件

  9. UVA 503 Parallelepiped walk

    https://vjudge.net/problem/UVA-503 题目 给出一个长方体和长方体上两点的坐标,求两点的沿着长方体表面走的最小距离 题解 沿着表面走就是在展开图上面走,如果分类讨论就需 ...

  10. Aladdin and the Flying Carpet (LightOJ - 1341）【简单数论】【算术基本定理】【分解质因数】

    Aladdin and the Flying Carpet (LightOJ - 1341)[简单数论][算术基本定理][分解质因数](未完成) 标签:入门讲座题解 数论 题目描述 It's said ...