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 相关文章推荐
javascript 关闭IE6、IE7
Jun 01 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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公用函数列表[正则]
2007/02/22 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
PHP中header用法小结
2016/05/23 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
详解Python3中ceil()函数用法
2019/02/19 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
python实现人工蜂群算法
2020/09/18 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
金融学专业大学生职业生涯规划
2014/03/07 职场文书
写自荐信的注意事项
2014/03/09 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
人事经理岗位职责
2014/04/28 职场文书
教师师德演讲稿
2014/05/06 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
导游词之桂林
2019/08/20 职场文书