本文實(shí)例為大家分享了jquery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的具體代碼,供大家參考,具體內(nèi)容如下
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'>請(qǐng)選擇</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'>請(qǐng)選擇</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調(diào)用" ); //floor = addressInfoService.getFloor(addressInfo.getParentId()); System.out.println(addressInfo.getParentId()); floor = addressInfoService.getFloor(addressInfo.getParentId()); return SUCCESS; } public String floor2(){ System.out.println( "這里是ajax的第二次調(diào)用" ); System.out.println(addressInfo.getParentId()); floor2 = addressInfoService.getBuild(addressInfo.getParentId()); return SUCCESS; } |
最后,一定不要忘記導(dǎo)入struts2-json-plugin-2.3.15.1.jar 這個(gè)夾包的版本也要和struts2的其他的夾包的版本一致。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持服務(wù)器之家。