1. 程式人生 > >Ajax+SSM實現四級聯下拉列表

Ajax+SSM實現四級聯下拉列表

function catalogABC(){ var object = $("#catalog").val(); $("#second").empty(); if(object !=null){ $.ajax({ url : "${contextPath}/demo/findObject?object="+object, type : 'post', dataType : 'json', async : false, //contentType: "application/json; charset=utf-8",
success : function(data) { console.log(data); if(data!=null){ $("#second").prepend("<option value='0'>請選擇</option>"); $.each(data,function(i,item){ $.each(item,function
(j,val){
$("#second").append("<option value="+val.bookid+">"+val.bookname+"</option>"); }) }); } } }) }else
{ alert("請選擇科目!!"); } } function secondQuery(){ var object = $("#second option:selected").val(); $("#third").empty(); $.ajax({ url : "${contextPath}/demo/findThird?object="+object, type : 'post', dataType : 'json', async : false, success : function(data) { console.log(data); if(data!=null){ $("#third").prepend("<option value='0'>請選擇</option>"); $.each(data,function(i,item){ $.each(item,function(j,val){ $("#third").append("<option value="+val.chapterid+">"+val.chaptername+"</option>"); }) }); } } }) } function thirdQuery(){ $("#forth").empty(); var object = $("#third option:selected").val(); $.ajax({ url : "${contextPath}/demo/findForth?object="+object, type : 'post', dataType : 'json', async : false, success : function(data) { console.log(data); if(data!=null){ $("#forth").prepend("<option value='0'>請選擇</option>"); $.each(data,function(i,item){ $.each(item,function(j,val){ $("#forth").append("<option value="+val.chapterid+">"+val.chaptername+"</option>"); }) }); } } }) }