Ajax+Json 级联菜单实现代码


Posted in Javascript onOctober 27, 2009

第一个下拉框:

<select id="select" name="rawfoodBasic.category" onchange="doChange(this.value);"> 
//第一个下拉框里的值 
</select>

第二个下拉框:
<select id="subSelect" name="rawfoodBasic.absorb" onchange="javascript:alert(this.value);" > //要3及菜单还可以在次写相应的时间 
<option value="0">--请选择二级菜单-- </option> 
</select>

js代码:
<script type="text/javascript"> 
$.ajaxSetup({ 
cache:false 
}); //清除ajax中之前的值 
function doChange(obj){ 
var url = '<c:url value="/nutrition/getSubDictDataToJsonByCategory.action"/>'+"?rawfood.category="+obj;//第一个下拉框选中后进入的action,action中给第二个下拉框所需的值赋值 
$.getJSON(url,function(json){ 
var seleOjb=document.getElementById("subSelect"); 
for(var k=0;k<seleOjb.options.length;k++){ 
seleOjb.options.remove(k); //当再选中第一个下拉框中的值时,把第二个下拉框中原来的值清除 
} 
$.each(json.subCategoryDictList,function(index,subDictData){ 
var optionj=document.createElement("option"); //为第二个下拉框赋值 
optionj.value = subDictData.id; 
//alert(subDictData.id); 
optionj.text=subDictData.name; 
seleOjb.add(optionj); 
}); 
}); 
} 
</script>

<action name="getSubDictDataToJsonByCategory" class="rawfoodAction" method="getSubDictDataToJsonByCategory"> 
<result name="success" type="json"> 
<param name="includeProperties"> //定义返回的参数 
^subCategoryDictList\[\d+\]\.id, 
^subCategoryDictList\[\d+\]\.name 
</param> 
</result> 
</action>
Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
jQuery实现大图轮播
Feb 13 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
javascript 关于# 和 void的区别分析
Oct 26 #Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 #Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 #Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 #Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 #Javascript
几个javascript操作word的参考代码
Oct 26 #Javascript
javascript 操作Word和Excel的实现代码
Oct 26 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php检测图片主要颜色的方法
2015/07/01 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
canvas知识总结
2017/01/25 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python三级菜单的实例
2017/09/13 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
flask session组件的使用示例
2018/12/25 Python
Python3 修改默认环境的方法
2019/02/16 Python
在Python中使用Neo4j的方法
2019/03/14 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
临床医学应届生求职信
2013/11/06 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
超越自我演讲稿
2014/05/21 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
超市食品安全承诺书
2015/04/29 职场文书
初中体育教学随笔
2015/08/15 职场文书