Ajax+Json 級聯(lián)菜單實現(xiàn)代碼

更新時間：2009年10月27日 21:38:49 作者：

Ajax+Json 級聯(lián)菜單實現(xiàn)代碼，需要的朋友可以參考下。

第一個下拉框:

復(fù)制代碼代碼如下:

 
<select id="select" name="rawfoodBasic.category" onchange="doChange(this.value);"> 
//第一個下拉框里的值 
</select> 

第二個下拉框:

復(fù)制代碼代碼如下:

 
<select id="subSelect" name="rawfoodBasic.absorb" onchange="javascript:alert(this.value);" > //要3及菜單還可以在次寫相應(yīng)的時間 
<option value="0">--請選擇二級菜單-- </option> 
</select> 

js代碼:

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$.ajaxSetup({ 
cache:false 
}); //清除ajax中之前的值 
function doChange(obj){ 
var url = '<c:url value="/nutrition/getSubDictDataToJsonByCategory.action"/>'+"?rawfood.category="+obj;//第一個下拉框選中后進(jìn)入的action,action中給第二個下拉框所需的值賦值 
$.getJSON(url,function(json){ 
var seleOjb=document.getElementById("subSelect"); 
for(var k=0;k<seleOjb.options.length;k++){ 
seleOjb.options.remove(k); //當(dāng)再選中第一個下拉框中的值時,把第二個下拉框中原來的值清除 
} 
$.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> 

復(fù)制代碼代碼如下:

 
<action name="getSubDictDataToJsonByCategory" class="rawfoodAction" method="getSubDictDataToJsonByCategory"> 
<result name="success" type="json"> 
<param name="includeProperties"> //定義返回的參數(shù) 
^subCategoryDictList\[\d+\]\.id, 
^subCategoryDictList\[\d+\]\.name 
</param> 
</result> 
</action> 

您可能感興趣的文章: