Ajax+Json 级联菜单实现代码

254 阅读 0 评论 168 点赞

我是靠谱客的博主诚心白羊，最近开发中收集的这篇文章主要介绍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> 