您的位置:首页 > Web前端 > JavaScript

Ajax+Json 级联菜单实现代码

2009-10-27 00:00 645 查看
第一个下拉框:
<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: