jQuery easyUI tree +struts2+hibernate +mysql 实现 三级联动的案例
2013-04-07 21:30
316 查看
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 });
·
[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 });
·
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 11级_Java_曹建波 04.07 jQuery easyUI tree +struts2+hibernate +mysql 实现 三级联动的案例
- jQuery+php+MySQL一张表实现三级联动菜单
- 省市区三级联动select下拉框，下拉框数据回显 Demo js脚本实现带脚本与案例,整理好了的下载既可用
- PHP+Mysql+Ajax+JS实现省市区三级联动
- PHP+Ajax+Mysql联合实现省市区三级联动
- Ajax商品分类三级联动的简单实现(案例)
- JQuery应用案例--JQuery-MySql版：城市省份区域-三级联动
- php+js+ajax+mysql实现省市三级联动
- c#+Mysql 实现三级联动
- PHP+Mysql+Ajax+JS实现省市区三级联动
- 使用AJAX+php+mysql实现省市县三级联动
- 用php+mysql+json+js+ajax实现省市县三级联动
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
- 使用AJAX+php+mysql实现省市县三级联动
- android省市区三级联动案例：（三）主要功能实现
- [置顶] 用Vue、element-ui、axios实现省市区三级联动
- wheel自定义控件，实现城市三级联动，时间选择的功能简单使用
- 中国地区三级联动下拉菜单的实现
- 省市县三级联动插件（面向过程，面向对象两种方式实现）
- Ajax实现三级联动