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技巧收藏
Apr 07 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
Javascript获取某个月的天数
May 30 Javascript
vue.extend与vue.component的区别和联系
Sep 19 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
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
input 高级限制级用法
2009/03/26 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
react基本安装与测试示例
2020/04/27 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
浅谈Python中函数的参数传递
2016/06/21 Python
Python中str.join()简单用法示例
2018/03/20 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python map比for循环快在哪
2020/09/21 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
优秀民警事迹材料
2014/01/29 职场文书
司法建议书范文
2014/05/13 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python