本文實例為大家分享了jquery實現三級聯動的具體代碼，供大家參考，具體內容如下
jsp頁面部分：
|
1
2
3
4
5
6
7
8
9
10
|
<li id="floors"> <span class="title" id="floorShow">選擇樓棟：</span> <select name="build" id="build" style="width: 282px;height: 40px;" onchange="floor2()"> </select> </li> <li id="builds"> <span class="title" id="floorShow">選擇住房：</span> <select name="builds" id="floot2" style="width: 282px;height: 40px;"> </select></li> |
js部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
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配置部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<package name="user" namespace="/" extends="json-default"> <action name="floor" class="addressInfoAction" method="floor"> <result type="json"> <param name="root">floor</param> </result> </action> <action name="floor2" class="addressInfoAction" method="floor2"> <result type="json"> <param name="root">floor2</param> </result> </action> </package> |
action部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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的其他的夾包的版本一致。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
