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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
Js sort排序使用方法
Oct 17 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
Python算法中的时间复杂度问题
2019/11/19 Python
pytorch实现线性拟合方式
2020/01/15 Python
基于python3实现倒叙字符串
2020/02/18 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
高一政治教学反思
2014/01/28 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
班训口号大全
2014/06/18 职场文书
电影红河谷观后感
2015/06/11 职场文书