当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Ajax+Json 级联菜单实现代码

Javascript
JavaScript 自动完成脚本整理(33个)
7个Javascript地图脚本整理
JavaScript 事件记录使用说明
Javascript remove 自定义数组删除方法
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Jquery Ajax.ashx 高效分页实现代码
extjs 学习笔记 四 带分页的grid
javascript void(0)的妙用
用Javascript 编写可以缓慢弹出收缩的层
再谈ie和firefox下的document.all属性
JavaScript 常用函数库详解
JS 截取字符串substr 和 substring方法的区别
Domino中运用jQuery读取视图内容的方法
Js+CSS 文字渐隐渐现显示
Javascript 小写字母依次变为大写
JavaScript 炫彩的文字
javascript 洒脱飘动的文字
JavaScript 平滑文字闪烁
仿打字特效的JS逐字出现的信息文字
JavaScript数组应用 可依次读取的公告栏文字

Javascript 中的 Ajax+Json 级联菜单实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 42 ::
收藏到网摘: n/a

Ajax+Json 级联菜单实现代码,需要的朋友可以参考下。 第一个下拉框:
复制代码 代码如下:

<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>