利用jquery、json实现前台无刷新的多级联动下拉菜单

利用jquery、json实现前台无刷新的多级联动下拉菜单博客地址：https://www.sodocs.net/doc/271647041.html,/u011687037/article/details/37995227

这两天我都在做一个项目，s2sh的一个项目，里面有一个模块需要实现菜单多级联动，然后问了一个同学，他给我提供了一个解决方案，是利用jquery还有json做的，现在把他写出来，第一，分享给需要的人，第二，也当时我自己的一个备份吧，如果以后忘记了还可以返回了看看。要实现无刷新多级联动，则需要按照以下步骤：

1、需要使用json-lib框架，到https://www.sodocs.net/doc/271647041.html,下载json-lib-1.1-jdk15.jar，运行json还需要的包有：commons-lang.jar、commons-logging.jar，commons-beanutils.jar、xom-1.0-2005-01-05.jar、ezmorph-1.0.1.jar，可在https://www.sodocs.net/doc/271647041.html,搜索下载。将那些包下载好后放进项目的Build Path即可。

我已打包上传，可以直接到点击打开链接下载json-lib包下载即可

2、在需要使用多级联动菜单的前台界面代码中，引用jquery文件。

3、自己编写一个json组件，也就是一个java类，方便后面从数据库中查询出数据后直接使用该类的静态方法发送json数据到前台。

代码如下：

[java]view plaincopy

1.package com.ms.teach.by.utils;

2.

3.

4.import java.io.IOException;

5.import java.io.PrintWriter;

6.import java.util.List;

7.import java.util.Set;

8.

9.import javax.servlet.http.HttpServletResponse;

10.

11.import net.sf.json.JSONArray;

12.

13.import org.apache.struts2.ServletActionContext;

14.

15./**

16. * @author chaoming

17. */

18.public class JSONUtils{

19.

20./**以JSON格式传递数据到客户端*/

21.public static void sendOfJSON(List list) {

22.if(list!=null && list.size()>0){

23. JSONArray jr = JSONArray.fromObject(list);

24. HttpServletResponse response = ServletActionContext.getResponse(

);

25. response.setHeader("cache-control", "no-cache");

26. response.setContentType("text/json");

27. response.setCharacterEncoding("UTF-8");

28. PrintWriter out;

29.try {

30. out = response.getWriter();

31. String jsonUser = jr.toString();

32.//System.out.println(jsonUser);

33. out.print(jsonUser);

34. out.flush();

35. out.close();

36. } catch (IOException e) {

37. e.printStackTrace();

38. }

39. }

40. }

41./**以JSON格式传递数据到客户端*/

42.public static void sendOfJSON(Set set) {

43. JSONArray jr = JSONArray.fromObject(set);

44. HttpServletResponse response = ServletActionContext.getResponse();

45. response.setHeader("cache-control", "no-cache");

46. response.setContentType("text/json");

47. response.setCharacterEncoding("UTF-8");

48. PrintWriter out;

49.try {

50. out = response.getWriter();

51. String jsonUser = jr.toString();

52.//System.out.println(jsonUser);

53. out.print(jsonUser);

54. out.flush();

55. out.close();

56. } catch (IOException e) {

57. e.printStackTrace();

58. }

59. }

60.}

4、在前台中，使用jquery语句发送请求到后台，比如一下代码：

上面的这段代码主要就是发送请求到后台的action，action的名字是

NativeCourses_getCourseTermByJSON，那个jquery的getJSON方法第一个参数就是action 的地址，第二个参数就是要传递到后台的参数，当有多个参数要传递的时候可以使用&来连接，比如para1=1¶2=2，第三个参数就是一个方法，主要是对后台传递回来的json数据进行处理。下面的那个course_term就是select标签的id。要在body的onload事件中执行上面那个方法，这样页面在载入的时候就可以直接从后台中查询想要的数据。

经过我的尝试，如果返回的data是java对象的话，输出的时候可以这样：data[i].name、data[i].age。

5、在后台的action无返回参数，即void类型的一个方法，比如一下代码：

[java]view plaincopy

1.public void getCourseTermByJSON() {

2. List l = this.nativeCoursesDAO.getCourseTerm();

3. JSONUtils.sendOfJSON(l);

4. }

上面的那个方法配置成一个action，查询出所需要的数据，

，查询出来后使用刚刚我们写的那个组件里面的静态方法发送数据到前台，注意，这里我查询出的只是单值，我没有试过查询出是对象时前台的处理情况，有兴趣的可以试试，上面的那个查询实际上相当于发送了一条类似于select name from person 的sql语句，如果是这样的话那么一会前台要输出的时候就是修改上面的那个jquery方法getJSON的function（data），因为是单值，所以

$("#course_term").append("" + data[i][1]+ "");需要改为$("#course_term").append("

value="+data[i]+">" + data[i]+ "");如果你查询的结果是多值的，比如类似于一下sql语句：select name,age from person这样的话直接使用$("#course_term").append("" + data[i][1]+

"");

即可，data[i][0]既是name的值，data[i][1]是age的值。

6、数据返回到了前台后进行处理，第一个下拉菜单数据项从数据库中加载，这样在可以写类似上面的那段jquery方法，写在某个select标签的onchange事件中，这样当select

选中项改变的时候就会执行jquery方法，传递那个select的选择项的value，传到后台再根据这个value查询出结果，就这样再返回前台，即可实现多级联动选择菜单。

excel应用场景：多级联动下拉列表实现选择一级部门下的二级部门

excel应用场景：多级联动下拉列表实现选择一级部门下的二 级部门 很多小伙伴们都知道，利用数据有效性功能做一个下拉列表，可以让用户从列表中选择选项，避免手工输入造成的错误。但是你们知道如何做一个多级联动下拉列表吗？先让我介绍一下，什么叫多级联动下拉列表。例如，公司里面的部门，分为一级部门，二级部门等。要求用户在选择了一个一级部门后，在二级部门中，只能选择一级部门对应的那些二级部门。最终效果我们就以上面这个例子开始，向小伙伴们，演示一下如何做这样一个多级联动下拉列表。动画演示解析：首先，分别定义了[市场部]和[信息研发部]名称，来管理各自对应的二级部门。然后，在数据有效性中，指定一级部门的数据序列来源于{B1：C1}最后，在数据有效性中，指定二级部门的数据序列来源于Indirect(D8)，快速适用公式到其他二级部门单元格中。这里只有一点要说明一下，那就是Indirect(D8)的作用。Indirect(D8)的执行细节，如下图：Indirect函数解析附：Indirect(ref)函数的定义：返回文本字符串ref所指定的引用扩展：如果是三级联动，例如下图中的例子，怎么做呢？最终效果请看动画演示效果：动画效果三级部门联动原理和二级部门联动的例子是一样的。最后总结一下，这一期的主要内容是联动下拉列表的实现，包括二级

联动以及三级联动。用到的主要功能点是：在名称管理器中创建名称来管理对应的单元格区域，以及通过Indirect函数去查找地址对应的实际引用（相当于二次查找）。欢迎大家观看，转发，并留下宝贵意见，谢谢。本文是[谈谈生活谈谈职场]的原创，如要转载，请联系作者。关键词：Excel 联动下拉列表，Excel 联动下拉框，Indirect。

Authorware下拉菜单与多级菜单的制作

Authorware下拉菜单与多级菜单的制作Authorware制作下拉菜单需要用到交互图标所提供的下拉菜单 首先是擦除原有菜单的“文件”二字 在用Authorware的菜单交互制作菜单时，Authorware总会在菜单栏上加一个“文件”菜单。这个“文件”菜单与我们的作品总是那么不协调。所以咱们先想办法去掉这个“文件”菜单。具体步骤如下： 1、在主流程线上拖一个交互图标，命名为“文件”。在其右侧放一个组图标（内容为空），在弹出的对话框中，选择“下拉菜单”。双击组图标上方的小方块，弹出属性对话框，选择“永久”及“退出交互”，其他选项就用默认的设置。 2、在交互图标的下方，放一个擦除图标，然后运行一下演示窗口，用鼠标单击演示窗口标题栏上的“文件”二字。仔细看，那个“文件”菜单会随之消失。运行一下看看是不是消除了。 下拉菜单制作 首先在流程线上拖入一交互图标，命名为“文件”，在其右侧放一个组图标，在弹出的对话框中，选择“下拉菜单”。将这个组图标命名为“新建”，范围选择“永久”。然后在其右侧继续放入五个这样的组图标，分别命名为：“打开”、“- ”（这个减号表示分界线）、“保存”、“另存为”、“- ”。最后再放上一个计算图标，命名为“退出”，打开它，输入" quit(0) " ，这样一个下拉菜单就做好了，运行下便能看到效果。

多级菜单制作 1、在流程线上放一个交互图标，命名为“图片欣赏”，在其右侧放一个组图标，选择交互类型“下拉菜单”。将这个组图标命名为“植物图片”。双击组图标上方的那个矩形色块，在弹出的属性对话框中，点击“响应”选项卡，选中其中的“永久”复选项，并将“分支”的值选为“返回”。您可以继续添加几个这样的组图标，分别命名为“动物图片”、“风景图片”等等，当然随便您啦。 2、按同样的方法，在主流程线上再放一个交互图标，其右侧也放几个组图标，分别命名为“梅花”、“兰花”、“菊花”等。各项设置同上面的步骤一样。惟一的不同，就是要把交互图标的命名删除，也就是说要让这个交互图标的名字为空。

js联动菜单下拉菜单日历方法

下拉式日历

PHP+MySQL实现二级联动下拉列表

PHP+MySQL实现二级联动下拉列表 1.Javascript在下拉列表的各个对象 2.案例代码 Liandong.php