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. //省份下拉菜单  

  12. function province_list(){  

  13.     $.getJSON('/?c=addr&a=getprovince',  

  14.             {},  

  15.             function(data){  

  16.                 $("#province_select").append("");  

  17.                 $.each(data,function(i,k){  

  18.                     if ( i==0 ) {  

  19.                         $("#province_select").append("<option selected>请选择</option><option value='"+k.local_name+"' >"+k.local_name+"</option>");  

  20.                         showcity(k.local_name);  

  21.                     } else {  

  22.                         $("#province_select").append("<option value='"+k.local_name+"'>"+k.local_name+"</option>");  

  23.                     }  

  24.                 })  

  25.             });  

  26. }  

  27. //显示城市下拉菜单  

  28. function showcity(province){  

  29.     $.getJSON('/?c=addr&a=getcity',  

  30.             {province:province},  

  31.             function(data){  

  32.                 $("#city_select_poss").html("");  

  33.                 $("#town_select_poss").html("");  

  34.                 if (data) {  

  35.                     $("#city_select_poss").html("<select id='city_select' name='city' onChange='city_select_function();'></select>");  

  36.                 }  

  37.                 $("#city_select").html("");  

  38.                 $.each(data,function(i,k){  

  39.                     if ( i == 0){  

  40.                         $("#city_select").append("<option  selected>请选择</option><option value='"+k.local_name+"'>"+k.local_name+"</option>");  

  41.                         var addr = province + k.local_name;  

  42.                         //$("#pre-address").html(addr);  

  43.                         showtown(k.local_name);  

  44.                     } else {  

  45.                         $("#city_select").append("<option value='"+k.local_name+"'>"+k.local_name+"</option>");  

  46.                     }  

  47.                 })  

  48.             })  

  49. }  

  50.   

  51. //显示城乡下拉菜单  

  52. function showtown(city){  

  53.     $.getJSON('/?c=addr&a=gettown',  

  54.             {city:city},  

  55.             function(data){  

  56.                 if (data) {  

  57.                     $("#town_select_poss").html("<select id='town_select' name='town' οnchange='town_select_function();'></select>");  

  58.                 } else {  

  59.                     $("#town_select_poss").html("");  

  60.                 }  

  61.                 $("#town_select").html("");  

  62.                 $.each(data,function(i,k){  

  63.                     if ( i == 0 ) {  

  64.                         $("#town_select").append("<option selected>请选择</option><option value='"+k.local_name+"'>"+k.local_name+"</option>");  

  65.                     } else {  

  66.                         $("#town_select").append("<option value='"+k.local_name+"'>"+k.local_name+"</option>");  

  67.                     }  

  68.                 })  

  69.             }  

  70.             )  

  71. }  

  72. //获取邮政编码  

  73. function getPostCode(town, city, province,id){  

  74.     $.get('/?c=addr&a=getpost',  

  75.             {town:town,city:city,province:province},  

  76.             function( data ){  

  77.                 if ( data > 0 ) {  

  78.                     if ( id == "" || id== undefined) {  

  79.                         $("#postcode_add").attr('value', data);  

  80.                     } else {  

  81.                         $("#"+id+"postcode_add").attr('value', data);  

  82.                     }  

  83.                 } else {  

  84.                     //$("#postcode_add").attr('value', '');  

  85.                     if ( id == "" || id== undefined) {  

  86.                         $("#postcode_add").attr('value', '');  

  87.                     } else {  

  88.                         $("#"+id+"postcode_add").attr('value', '');  

  89.                     }  

  90.                 }  

  91.             }  

  92.         )  

  93. }  

  94.   

  95. //城市选项发生改变时，触发此函数  

  96. function city_select_function() {  

  97.     var province = $("#province_select").find("option:selected").text();  

  98.     var city = $("#city_select").find("option:selected").text();  

  99.     var addr = province + city;  

  100.     $("#pre-address").html(addr);  

  101.     showtown(city);  

  102.     var town = $("#town_select").find("option:selected").text();  

  103.     getPostCode(town, city, province);  

  104. }  

  105.   

  106. //城乡选项发生变化时，触发此函数  

  107. function town_select_function(){  

  108.     var province = $("#province_select").find("option:selected").text();  

  109.     var city = $("#city_select").find("option:selected").text();  

  110.     var town = $("#town_select").find("option:selected").text();  

  111.     var addr = province + city + town;  

  112.     $("#pre-address").html(addr);  

  113.     getPostCode(town, city, province);  

  114. }