AJAX省市区三级联动下拉列表实现 JAVA开发

转载自：http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html

 例子--District Picker

           http://fengyuanchen.github.io/distpicker/

 

此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表：

    代码如下：

    建立数据库中的代码和一些配置文件信息就省略了，主要有JavaScript中的代码为：

   $(document).ready(function(){
     $.get("getProvince.do", function(result){
       $("#showp").html(result);
     });
   })
   var xmlhttp;
   function mysend(str){
    $(document).ready(function(){
         $("#show2").html("");
     })
    var show = document.getElementByIdx_x_x_x_x_x("show");
    show.innerHTML = "";
   
    var province = document.getElementByIdx_x_x_x_x_x("province").value;
    if(province!=0){
    
     if(window.XMLHttpRequest){
         xmlhttp = new XMLHttpRequest();
     }else{
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
              
                show.innerHTML = xmlhttp.responseText;
             
             }
        }
        var ss = encodeURIComponent(str);
        xmlhttp.open("GET","getCity.do?provinceid="+ss,true);
        xmlhttp.send(null);
    
        }
    }
    
      
       function myarea(str){
    
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
       xmlhttp.onreadystatechange=function(){
           if(xmlhttp.readyState==4 && xmlhttp.status==200){
               var show2 = document.getElementByIdx_x_x_x_x_x("show2");
               show2.innerHTML = xmlhttp.responseText;
            }
       }
      
      
       var ss = encodeURIComponent(str);
       xmlhttp.open("GET","getArea.do?cityid="+ss,true);
       xmlhttp.send(null);
       }

    html页面中的代码为：

      <div class="drink"><label class="label">所在地</label> 
      <span id="showp"></span>
      <span id="show"></span>
      <span id="show2"></span></div>

   action中的代码为：

package mobi.zhangsheng.jiejia.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.springframework.stereotype.Controller;
import mobi.zhangsheng.jiejia.domain.Areas;
import mobi.zhangsheng.jiejia.service.AgentsService;
import mobi.zhangsheng.jiejia.service.AreasService;
@Controller
public class ProvinceAction {
 
 private int provinceid;
 private int cityid;
 @Resource
 private AreasService as;
 @Resource
 private AgentsService ags;
 
 
 
 public int getProvinceid() {
  return provinceid;
 }

 public void setProvinceid(int provinceid) {
  this.provinceid = provinceid;
 }

 public int getCityid() {
  return cityid;
 }

 public void setCityid(int cityid) {
  this.cityid = cityid;
 }

 
 public void getProvince(){
  List provinceList = as.getAreasPrvinceList();
  HttpServletResponse resp= ServletActionContext.getResponse();
  HttpServletRequest request = ServletActionContext.getRequest();
  //resp.setContentType("xml");
  resp.setContentType("text/html");
  resp.setCharacterEncoding("utf-8");
  try {
   PrintWriter out = resp.getWriter();
   out.print("<select id='province' onchange='mysend(this.value)' name='province'>");
   out.print("<option value='-1'>");
   out.print("请选择省市");
   out.print("</option>");
   for(int i=0;i<provinceList.size();i++){
    Areas area = (Areas) provinceList.get(i);
    out.print("<option value='"+area.getAreaId()+"'>");
    out.print(area.getAreaTitle());
    out.print("</option>");
   }
   
   out.print("</select>");
   //out.print("<xml><city>shanghai</city></xml>");
  } catch (IOException e) {
   e.printStackTrace();
  }
  
 }
 public void getCity(){
 
  List cityList = as.getAreasCityList(provinceid);
  HttpServletResponse resp= ServletActionContext.getResponse();
  //resp.setContentType("xml");
  resp.setContentType("text/html");
  resp.setCharacterEncoding("utf-8");
  try {
   PrintWriter out = resp.getWriter();
   out.print("<select id='city' onchange='myarea(this.value)' name='city'>");
   out.print("<option value='-1'>");
   out.print("请选择市区");
   out.print("</option>");
   for(int i=0;i<cityList.size();i++){
    Areas area = (Areas) cityList.get(i);
    out.print("<option value='"+area.getAreaId()+"'>");
    out.print(area.getAreaTitle());
    out.print("</option>");
   }
   
   out.print("</select>");
   //out.print("<xml><city>shanghai</city></xml>");
  } catch (IOException e) {
   e.printStackTrace();
  }
  
   
 }
 
 public void getArea(){
  
  List areaList = as.getAreasCityList(cityid);
  if(areaList.size()==0){
   
  }else{
   HttpServletResponse resp= ServletActionContext.getResponse();
   
   resp.setContentType("text/html");
   resp.setCharacterEncoding("utf-8");
   try {
    PrintWriter out = resp.getWriter();
    out.print("<select id='area' name='area'>");
    out.print("<option value='-1'>");
    out.print("请选择市区");
    out.print("</option>");
    for(int i=0;i<areaList.size();i++){
     Areas area = (Areas) areaList.get(i);
     out.print("<option value='"+area.getAreaId()+"'>");
     out.print(area.getAreaTitle());
     out.print("</option>");
    }
    
    out.print("</select>");
    
   } catch (IOException e) {
    e.printStackTrace();
   }
   
  }
   
 }

}