jquery ajax 多级select 菜单联动加载实现

最新推荐文章于 2021-08-06 14:20:42 发布

klggg

最新推荐文章于 2021-08-06 14:20:42 发布

阅读量8.2k

点赞数

分类专栏： Javascript 文章标签： jquery ajax function javascript generator html

本文链接：https://blog.csdn.net/gggxin/article/details/6291225

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

大致流程
1. 先绑定各级 select 元素的 change 事件
2. 加载当前菜单数据后触发当前菜单的 change 事件
3. 触发当前菜单的 change事件时执行加载下级菜单的数据

加载当前数据->触发change事件-> 加载下级数据

如此实现一层层传递加载

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <SCRIPT LANGUAGE="JavaScript" src="http://open.snda.com/js/jquery.js" mce_src="http://open.snda.com/js/jquery.js"> </SCRIPT> </HEAD> <BODY> <SELECT NAME="aaa1" id="aaa1"> <option value="11" >11</option> <option value="12" >12</option> </SELECT> <SELECT NAME="aaa2" id="aaa2"> <option value="" >无</option> </SELECT> <SELECT NAME="aaa3" id="aaa3"> <option value="" >无</option> </SELECT> <SELECT NAME="aaa4" id="aaa4"> <option value="" >无</option> </SELECT> </BODY> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HTML>