MyException - 我的异常网
当前位置:我的异常网» MySQL » jQuery easyUI tree +struts2+hibernate +mysql 兑

jQuery easyUI tree +struts2+hibernate +mysql 兑现 三级联动的案例

www.myexceptions.net  网友分享于:2013-04-10  浏览:314次
jQuery easyUI tree +struts2+hibernate +mysql 实现 三级联动的案例

index.jsp

[html]view plaincopyprint?

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script> 

<script type="text/javascript" src="${pageContext.request.contextPath }/js/select.js"></script> 

<body> 

<div align="center"> 

<div> 

<select id="province"> 

<option value="-1">请选择省</option> 

</select> 

<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 }); 

· 

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有