SSH結合jquery實現三級聯動效果

本文實例為大家分享了jquery實現三級聯動的具體代碼，供大家參考，具體內容如下

jsp頁面部分：

 <li id="floors"> <span id="floorShow">選擇樓棟：</span> <select name="build" id="build" onchange="floor2()"> </select> </li> <li id="builds"> <span id="floorShow">選擇住房：</span> <select name="builds" id="floot2"> </select></li>

js部分：

 function floor(){ document.getElementById("build").options.length =0; document.getElementById("floot2").options.length =0; var parentId = document.getElementById("village").value; if(parentId == 0){ }else{ $.ajax({ type : "post", url : "floor.action", data : {"parentId":parentId}, dataType : "json", success :function(data){ console.log(data); var len = data.length; var htm = "<option value='0'>請選擇</option>"; for(var i=0;i<len;i++){ htm += "<option value='"+data[i].id+"'>"+data[i].info+"</option>"; } $("#build").append(htm); } }) } } function floor2(){ document.getElementById("floot2").options.length =0; var build = document.getElementById("build").value; if(build == 0){ }else{ $.ajax({ type : "post", url : "floor2.action", data : {"parentId":build}, dataType : "json", success : function(data){ var len = data.length; var htm = "<option value='0'>請選擇</option>"; for(var i=0;i<len;i++){ htm += "<option value='"+data[i].id+"'>"+data[i].info+"</option>"; } $("#floot2").append(htm); } }) } }

struts2配置部分：

 <package name="user" namespace="/" extends="json-default"> <action name="floor" method="floor"> <result type="json"> <param name="root">floor</param> </result> </action> <action name="floor2" method="floor2"> <result type="json"> <param name="root">floor2</param> </result> </action> </package>

action部分：

 public String floor(){ System.out.println("這裡是ajax調用"); //floor = addressInfoService.getFloor(addressInfo.getParentId()); System.out.println(addressInfo.getParentId()); floor = addressInfoService.getFloor(addressInfo.getParentId()); return SUCCESS; } public String floor2(){ System.out.println("這裡是ajax的第二次調用"); System.out.println(addressInfo.getParentId()); floor2 = addressInfoService.getBuild(addressInfo.getParentId()); return SUCCESS; }

最後，一定不要忘記導入struts2-json-plugin-2.3.15.1.jar 這個夾包的版本也要和struts2的其他的夾包的版本一致。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。