【js与jquery】三级联动菜单的制作

1.效果如图所示：

2.html代码：

[php] view plaincopy

1. <li><span class="receiving">所在地区：</span>
2. <span id="addr_select">
3. <select id=‘province_select‘ name=‘province‘></select>
4. <span id="city_select_poss" class="ssq"></span>
5. <span id="town_select_poss" class="ssq"></span>
6. </span>
7. <font color="#FF0000">*</font>
8. </li>
9. <li>
10. <span class="receiving">街道地址：</span><span id="pre-address"></span>
11. <input type="text" id="add_addr_input" name="address" value="" style="width: 180px;"/>
12. <font color="#FF0000"> *</font><em id="add_addr_input_info"></em>
13. </li>
14. <li>
15. <span class="receiving">邮政编码：</span>
16. <input type="text" value="" id="postcode_add" name="postcode" style="width: 180px;"/>
17. <font color="#FF0000"> </font>
18. t;/li>

3.jquery代码：

[php] view plaincopy

1. $(document).ready(function(){
2. province_list();//加载省份下拉菜单
3. $("#province_select").change(function(){//省份选项发生改变时
4. var province = $("#province_select").val();
5. $("#pre-address").html(province);
6. showcity(province);//省份发生变化时，城市下拉菜单也要随之变化
7. $("#postcode_add").attr(‘value‘, ‘‘);//在选择town项时，会自动获取邮政编码
8. })
9. })
10. //省份下拉菜单
11. function province_list(){
12. $.getJSON(‘/?c=addr&a=getprovince‘,
13. {},
14. function(data){
15. $("#province_select").append("");
16. $.each(data,function(i,k){
17. if ( i==0 ) {
18. $("#province_select").append("<option selected>请选择</option><option value=‘"+k.local_name+"‘ >"+k.local_name+"</option>");
19. showcity(k.local_name);
20. } else {
21. $("#province_select").append("<option value=‘"+k.local_name+"‘>"+k.local_name+"</option>");
22. }
23. })
24. });
25. }
26. //显示城市下拉菜单
27. function showcity(province){
28. $.getJSON(‘/?c=addr&a=getcity‘,
29. {province:province},
30. function(data){
31. $("#city_select_poss").html("");
32. $("#town_select_poss").html("");
33. if (data) {
34. $("#city_select_poss").html("<select id=‘city_select‘ name=‘city‘ onChange=‘city_select_function();‘></select>");
35. }
36. $("#city_select").html("");
37. $.each(data,function(i,k){
38. if ( i == 0){
39. $("#city_select").append("<option  selected>请选择</option><option value=‘"+k.local_name+"‘>"+k.local_name+"</option>");
40. var addr = province + k.local_name;
41. //$("#pre-address").html(addr);
42. showtown(k.local_name);
43. } else {
44. $("#city_select").append("<option value=‘"+k.local_name+"‘>"+k.local_name+"</option>");
45. }
46. })
47. })
48. }
49. //显示城乡下拉菜单
50. function showtown(city){
51. $.getJSON(‘/?c=addr&a=gettown‘,
52. {city:city},
53. function(data){
54. if (data) {
55. $("#town_select_poss").html("<select id=‘town_select‘ name=‘town‘ onchange=‘town_select_function();‘></select>");
56. } else {
57. $("#town_select_poss").html("");
58. }
59. $("#town_select").html("");
60. $.each(data,function(i,k){
61. if ( i == 0 ) {
62. $("#town_select").append("<option selected>请选择</option><option value=‘"+k.local_name+"‘>"+k.local_name+"</option>");
63. } else {
64. $("#town_select").append("<option value=‘"+k.local_name+"‘>"+k.local_name+"</option>");
65. }
66. })
67. }
68. )
69. }
70. //获取邮政编码
71. function getPostCode(town, city, province,id){
72. $.get(‘/?c=addr&a=getpost‘,
73. {town:town,city:city,province:province},
74. function( data ){
75. if ( data > 0 ) {
76. if ( id == "" || id== undefined) {
77. $("#postcode_add").attr(‘value‘, data);
78. } else {
79. $("#"+id+"postcode_add").attr(‘value‘, data);
80. }
81. } else {
82. //$("#postcode_add").attr(‘value‘, ‘‘);
83. if ( id == "" || id== undefined) {
84. $("#postcode_add").attr(‘value‘, ‘‘);
85. } else {
86. $("#"+id+"postcode_add").attr(‘value‘, ‘‘);
87. }
88. }
89. }
90. )
91. }
92. //城市选项发生改变时，触发此函数
93. function city_select_function() {
94. var province = $("#province_select").find("option:selected").text();
95. var city = $("#city_select").find("option:selected").text();
96. var addr = province + city;
97. $("#pre-address").html(addr);
98. showtown(city);
99. var town = $("#town_select").find("option:selected").text();
100. getPostCode(town, city, province);
101. }
102. //城乡选项发生变化时，触发此函数
103. function town_select_function(){
104. var province = $("#province_select").find("option:selected").text();
105. var city = $("#city_select").find("option:selected").text();
106. var town = $("#town_select").find("option:selected").text();
107. var addr = province + city + town;
108. $("#pre-address").html(addr);
109. getPostCode(town, city, province);
110. }