Ajax Json cascading menu implementation code_json

The first drop-down box:

Copy code The code is as follows:

<select id=" select" name="rawfoodBasic.category" onchange="doChange(this.value);">
//The value in the first drop-down box
</select>

Second drop-down box:

Copy code The code is as follows:

<select id ="subSelect" name="rawfoodBasic.absorb" onchange="javascript:alert(this.value);" > //If you want 3 menus, you can also write the corresponding time
<option value="0 ">--Please select the secondary menu-- </option>
</select>

js code:

Copy code The code is as follows:

<script type="text/javascript">
$.ajaxSetup({
cache: false
}); //Clear the previous value in ajax
function doChange(obj){
var url = '<c:url value="/nutrition/getSubDictDataToJsonByCategory.action"/>' "?rawfood.category=" obj;//The action entered after the first drop-down box is selected, and the required value of the second drop-down box is assigned in the action
$.getJSON(url,function(json){
var seleOjb=document.getElementById("subSelect");
for(var k=0;k<seleOjb.options.length;k ){
seleOjb.options.remove(k); //When When the value in the first drop-down box is selected again, clear the original value in the second drop-down box
}
$.each(json.subCategoryDictList,function(index,subDictData){
var optionj =document.createElement("option"); //Assign a value to the second drop-down box
optionj.value = subDictData.id;
//alert(subDictData.id);
optionj.text=subDictData .name;
seleOjb.add(optionj);
});
});
}
</script> 🎜>

Copy code

The code is as follows: <action name="getSubDictDataToJsonByCategory" class="rawfoodAction" method="getSubDictDataToJsonByCategory"> ; <result name="success" type="json"> <param name="includeProperties"> //Define the returned parameters

^subCategoryDictList[d ].id,

^subCategoryDictList[d ].name
</param>
</result>
</action>