Question

求ajax三级级联下拉框

求能够连接数据库的，单表查询的DEMO。（最好是完整的，本人新手）
123

Answer 1

province Demo：

public class CodeoemBncProvince extends BaseObject {
    private static final long serialVersionUID = 1L;
    private long id;
    private String name;
    public long getId() {
        return id;
    }
    public void setId(long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

City Demo：

public class CodeoemBncCity extends BaseObject{
    private static final long serialVersionUID = 1L;
    private long id;
    private long provinceId;
    private String name;
    public long getId() {
        return id;
    }
    public void setId(long id) {
        this.id = id;
    }
    public long getProvinceId() {
        return provinceId;
    }
    public void setProvinceId(long provinceId) {
        this.provinceId = provinceId;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

District Demo：

public class CodeoemBncDistrict extends BaseObject{
    private static final long serialVersionUID = 1L;
    private long id;
    private long cityId;
    private String name;
    public long getId() {
        return id;
    }
    public void setId(long id) {
        this.id = id;
    }
    public long getCityId() {
        return cityId;
    }
    public void setCityId(long cityId) {
        this.cityId = cityId;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

jsp Demo：

<tr>
     <th>住址</th>
        <td>
            <div>
                 <div>
                     <label>省:</label>
                     <s:select id="province" list="provinceList" listKey="id" listValue="name" headerKey="-1"  headerValue="请选择省份" ></s:select>
                </div>
                <div>
                    <label>市:</label>
                    <select id="city" >
                        <option value="-1">请选择城市</option>
                    </select>
               </div>
               <div >    
                   <label>区\县:</label>
                   <select id="section"  >
                       <option value="-1">请选择区县</option>
                   </select>
               </div>
      </td>
</tr>

js Demo：

<script type="text/javascript">
     jQuery(document).ready(function($){
         $("#province").change(function(){
             var pid=$("#province").val();
             var sectionObj=document.getElementById("section");
             sectionObj.length=0;
             sectionObj.options[0]=new Option("请选择区县",-1);
            sectionObj.value=-1;
             if(pid!=-1){
                 var url="/service_order/getCity.htm";
                 var data={"provinceId":pid};
                  $.post(url,data,function(result){
                      var cityObj=document.getElementById("city");
                      cityObj.length=0;
                      var aryData=null;
                      if(!!(window.attachEvent && !window.opera)){ 
                      //ie 
                         aryData=execScript(result); 
                       }else
                      { //not ie 
                         aryData=eval(result);
                       }
                      cityObj.options[0]=new Option("请选择城市",-1);
                      for(var i=0;i<aryData.length;i++){
                          var city=aryData[i];
                          cityObj.options[i+1]=new Option(city.name,city.id);
                      }
                  });
             }else{
                 var cityObj=document.getElementById("city");
                 cityObj.length=0;
                 cityObj.options[0]=new Option("请选择城市",-1);
                 cityObj.value=-1;
             }
              
         });
         $("#city").change(function(){
             var cid=$("#city").val();
             if(cid!=-1){
                 var url="/service_order/getSection.htm";
                 var data={"cityId":cid};
                  $.post(url,data,function(result){
                      var sectionObj=document.getElementById("section");
                      sectionObj.length=0;
                      var aryData=null;
                      if(!!(window.attachEvent && !window.opera)){ 
                      //ie 
                         aryData=execScript(result); 
                       }else
                      { //not ie 
                         aryData=eval(result);
                       }
                      sectionObj.options[0]=new Option("请选择区县",-1);
                      for(var i=0;i<aryData.length;i++){
                          var section=aryData[i];
                          sectionObj.options[i+1]=new Option(section.name,section.id);
                      }
                  });
             }else{
                 var sectionObj=document.getElementById("section");
                 sectionObj.length=0;
                 sectionObj.options[0]=new Option("请选择区县",-1);
                 sectionObj.value=-1;
             }
              
         });
     });
 </script>

Action Demo：

//获取城市

public void getCity() throws Exception {
        HttpServletResponse res = ServletActionContext.getResponse();
        PrintWriter out = res.getWriter();
        try {
            Map<String, Object> searchMap = new HashMap<String, Object>();
            searchMap.put("provinceId", Long.parseLong(provinceId));
            cityList = som.getObjectsByParams(CodeoemBncCity.class, searchMap,
                    null);
            if (cityList != null) {
                Gson gson = new Gson();
                String result = gson.toJson(cityList);
                out.print(result);
            } else {
                System.out.println("没有获取到城市信息：no citys");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            out.flush();
            out.close();
        }
    }

    //获取地区

 public void getSection() throws Exception {
        HttpServletResponse res = ServletActionContext.getResponse();
        PrintWriter out = res.getWriter();
        try {
            Map<String, Object> searchMap = new HashMap<String, Object>();
            searchMap.put("cityId", Long.parseLong(cityId));
            districtList = som.getObjectsByParams(CodeoemBncDistrict.class,
                    searchMap, null);
            if (districtList != null) {
                Gson gson = new Gson();
                String result = gson.toJson(districtList);
                out.print(result);
            } else {
                System.out.println("没有获取到区县信息：no section");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            out.flush();
            out.close();
        }
    }

over.

注：action中的查询方法都是经过封装过的，所以只是个参考，要结合自己项目中的一些查询，切勿死搬硬套；本来回答一次了，被封了，特地换个号再贴一次，再封我也没办法了