jQuery easyUI tree +struts2+hibernate +mysql 实现 三级联动的案例
index.jsp
[html]view plaincopyprint?
1 <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script>
2 <script type="text/javascript" src="${pageContext.request.contextPath }/js/select.js"></script>
3 <body>
4 <div align="center">
5 <div>
6 <select id="province">
7 <option value="-1">请选择省</option>
8 </select>
9 <select id="city">
10 <option value="-1">请选择市</option>
11 </select>
12 <select id="country">
13 <option value="-1">请选择镇</option>
14 </select>
15 </div>
16 </div>
17 </body>
Select.js
[javascript]view plaincopyprint?
18 $(document).ready(function() {
19
20 // 这是jQuery中第一个ajax案例
21 $.ajax({
22 async : true, // 代表异步发送请求
23 type : "GET", // 采用发送请求的方式 GET 或者POST
24 url : "./csdn/ProvinceAction_query.action?time=" + new Date().getTime(), // 设置请求的路径
25 dataType : "json", // 服务预返回的数据格式 json html xml text等
26 success : function(data, textStatus) { // 成功回调函数
27 // 获取所有的省
28 var jsonpros = data.provinces;
29 // 遍历省
30 for (var i = 0; i < jsonpros.length; i++) {
31 // 获取具体的省
32 var jsonpro = jsonpros[i];
33 // 创建一个option的元素节点
34 var $optpro = $("<option></option>");
35 // 设置其属性
36 $optpro.attr("value", jsonpro.pid);
37 // 设置文本
38 $optpro.text(jsonpro.pname);
39 // 把创建的option省节点添加到省的selete节点中
40 $("#province").append($optpro);
41
42 }
43 },
44 error : function(xhr, textStatus, errorThrown) {// 失败回调函数
45 }
46 });
47
48 // 这是jQuery中第二个ajax案例
49 // 当省发生变化的时候 触发操作
50 $("#province").bind("change", function() {
51
52 // 清空数据
53 $("#city").empty();
54 $("#country").empty();
55
56 // 传递的数据
57 var pid = $("#province").val();
58
59 $.get( "./csdn/CityAction_query.action?time="
60 + new Date().getTime(),// url 请求的路径
61 {
62 pid : pid
63 }, // data 请求传递的参数
64 function(data) { // 成功时 回调的函数
65 // 得到所有的市
66 var jsoncities = data.cities;
67 for (var i = 0; i < jsoncities.length; i++) {
68
69 // 获取具体的市
70 var jsoncity = jsoncities[i];
71 // 创建一个option的元素节点
72 var $optcity = $("<option></option>");
73 // 设置其属性
74 $optcity.attr("value", jsoncity.cid);
75 // 设置文本
76 $optcity.text(jsoncity.cname);
77 // 把创建的option市节点添加到市的select节点中
78 $("#city").append($optcity);
79
80 }
81
82 }, "json"); // type:返回的数据类型
83
84 });
85
86 // 这是jQuery中第三个ajax案例
87 $("#city").bind("change", function() {
88
89 //清空数据
90 $("#country").empty(); //第一个不清除
91 // 请求的参数
92 var cid = $("#city").val();
93
94 // 发送ajax
95 $.post(
96 "./csdn/CountryAction_query.action?time="
97 + new Date().getTime(), {
98 cid : cid
99 }, function(data) {
100 // 得到所有的城镇
101 var jsoncountries = data.countries;
102 // 遍历所有的城镇
103 for (var i = 0; i < jsoncountries.length; i++) {
104 // 获取具体的市
105 var jsoncountry = jsoncountries[i];
106 // 创建一个option的元素节点
107 var $optcountry = $("<option></option>");
108 // 设置其属性
109 $optcountry.attr("value", jsoncountry.tid);
110 // 设置文本
111 $optcountry.text(jsoncountry.tname);
112 // 把创建的option城镇节点添加到城镇的select节点中
113 $("#country").append($optcountry);
114
115 }
116
117 }, "json");
118
119 });
120
121 });