JS+AJAX实现省市区的下拉列表联动

<div class="info">
<div class="title">企业地址:</div>
<div class="value">
<fieldset disabled>
<select id="provinceselect" class="form-control" data-val="${factorycenterinfo.province}" οnchange="provincechange()">
<c:foreach items="${factoryplace.provincelist}" var="province" varstatus="status">
<option value="${province.key}" <span style="color:#3333ff;"><c:if test="${factorycenterinfo.province == province.key}">selected</c:if></span><span style="color:#3366ff;">></span>${province.value}</option>
</c:foreach>
</select>
</fieldset>
<fieldset disabled>
<select id="cityselect" class="form-control" data-val="${factorycenterinfo.city}" οnchange="citychange()">
<c:foreach items="${factoryplace.citylist}" var="city" varstatus="status">
<option value="${city.key}" <span style="color:#3333ff;"><c:if test="${factorycenterinfo.city == city.key}">selected</c:if></span>>${city.value}</option>
</c:foreach>
</select>
</fieldset>
<fieldset disabled>
<select id="areaselect" class="form-control" data-val="${factorycenterinfo.area}">
<c:foreach items="${factoryplace.arealist}" var="area" varstatus="status">
<option value="${area.key}" <span style="color:#3333ff;"><c:if test="${factorycenterinfo.area == area.key}">selected</c:if></span>>${area.value}</option>
</c:foreach>
</select>
</fieldset>
</div>
</div>

function provincechange(){
 
 var provinceid = $("#provinceselect").val();
 $("#cityselect").empty();
 $("#areaselect").empty();
 
 if(provinceid != null && provinceid != ""){
  
  $.ajax({
   type: "post",
   url:"<span style="color:#3333ff;">factory/getchangelist</span>",
   datatype:'json',
   data: {
    "parentid":provinceid,
    "placekbn":"c"
   },
   cache:false,
   success: function(data){
    if("success" == data.result){
     if(data.citylist != null && data.citylist.length > 0){
      for(var i = 0;i < data.citylist.length;i++){
       var city = data.citylist[i];
       var key = (city.key == null? "":city.key);
       var value = (city.value == null? "":city.value);
       $("#cityselect").append("<option value = \"" + key + "\">"+ value +"</option>");
      }
     }else{
      $("#cityselect").append("<option> </option>");
     }
     $("#areaselect").append("<option> </option>");
    }
    if("error" == data.result){
     $("#cityselect").append("<option> </option>");
     $("#areaselect").append("<option> </option>");
    }
   },
   error:function(xmlhttprequest, textstatus, errorthrown){
       $("#errorcontent").html("系统异常请联系管理员");
      }
   
  });
 }else{
  $("#cityselect").append("<option> </option>");
  $("#areaselect").append("<option> </option>");
 }
}
 
function citychange(){
 
 var cityid = $("#cityselect").val();
 
 $("#areaselect").empty();
 
 if(cityid != null && cityid != ""){
  
  $.ajax({
   type: "post",
   url:"<span style="color:#3333ff;">factory/getchangelist</span>",
   datatype:'json',
   data: {
    "parentid":cityid,
    "placekbn":"q"
   },
   cache:false,
   success: function(data){
    if("success" == data.result){
     if(data.arealist != null && data.arealist.length > 0){
      for(var i = 0;i < data.arealist.length;i++){
       var area = data.arealist[i];
       var key = (area.key == null? "":area.key);
       var value = (area.value == null? "":area.value);
       $("#areaselect").append("<option value = \"" + key + "\">"+ value +"</option>");
      }
     }else{
      $("#areaselect").append("<option> </option>");
     }
    }
    if("error" == data.result){
     $("#areaselect").append("<option> </option>");
    }
   },
   error:function(xmlhttprequest, textstatus, errorthrown){
       $("#errorcontent").html("系统异常请联系管理员");
      }
   
  });
 }else{
  $("#cityselect").append("<option> </option>");
  $("#areaselect").append("<option> </option>");
 }
}

@requestmapping("<span style="color:#3333ff;">getchangelist</span>")
 @responsebody
 public object getchangelist(string parentid,string placekbn){
  logbefore(logger, "factory/getchangelist");
  map<string,object> returnmap = new hashmap<string,object>();
  
  if(factoryconsts.char_kbn_city.equals(placekbn)){
   if(getplacelist( parentid, placekbn) != null && getplacelist( parentid, placekbn).size() > factoryconsts.int_0){
    returnmap.put("result", "success");
    returnmap.put("citylist", getplacelist(parentid, placekbn));
   }else{
    returnmap.put("error", "市列表为空");
    returnmap.put("citylist", "");
   }
   
  }else if(factoryconsts.char_kbn_area.equals(placekbn)){
   if(getplacelist( parentid, placekbn) != null && getplacelist( parentid, placekbn).size() > factoryconsts.int_0){
    returnmap.put("result", "success");
    returnmap.put("arealist", getplacelist(parentid, placekbn));
   }else{
    returnmap.put("error", "区列表为空");
    returnmap.put("arealist", "");
   }
  }
  return returnmap;
 }
 /**
  * 省下拉列表
  * 
  * @return
  */
 private list<placeoption> getplacelist(string parentid,string kbn){
  //下拉列表
  list<placeoption> placelist = new arraylist<placeoption>();
  placelist.add(new placeoption());
  queryplaceinfoparam queryparam = new queryplaceinfoparam();
  queryparam.setplacekbn(kbn);
  if(!stringutils.isempty(parentid)){
   queryparam.setplaceid(integer.valueof(parentid));
  }
  factoryplacenameresult placeresult  = placeinfoservice.queryplaceinfo(queryparam);
  
  if(placeresult != null && "0".equals(placeresult.getresult()) 
    && placeresult.getplaceinfo() != null 
    && placeresult.getplaceinfo().size() > factoryconsts.int_0){
   list<placeinfofa> placeinfo = new arraylist<placeinfofa>();
   placeinfo = placeresult.getplaceinfo();
   for(factoryplaceinfo info : placeinfo){
    placeoption option = new placeoption();
    option.setkey(string.valueof(info.getplaceid()));
    option.setvalue(info.getplacename());
    placelist.add(option);
   }
  }
  
  return placelist;
 }

/**
  * 基本信息初期化方法
  * 
  * @param request
  * @return
  */
 @requestmapping("tofactorybaseinfo")
 public modelandview tofactorybaseinfo(httpservletrequest request){
  logbefore(logger, "factory/tofactorybaseinfo");
  modelandview mv = new modelandview();
  //企业类型
  map<string,string> factorytypemap = new treemap<string,string>();
  factorytypemap.putall(factoryconsts.factory_type_map);
  mv.addobject("factorytypemap", factorytypemap);
  
  factoryfactoryinfo factoryinfo = (factoryfactoryinfo) request.getsession().getattribute(const.session_factory);
 
  //取得企业信息
  factoryfactoryinfoparam infoparam = new factoryfactoryinfoparam();
             factoryfactoryinforesult inforesult = new factoryfactoryinforesult();
  infoparam.setfactoryid(string.valueof(factoryinfo.getfactoryid()));
  infoparam.setdifferent(factoryconsts.string_web_one); //web
  inforesult = factoryservice.factoryinfo(infoparam);
 
  factoryplace factoryplace = new factoryplace();
  
  <span style="color:#3333ff;">// 省下拉列表
  factoryplace.setprovincelist(getplacelist("0",factoryconsts.char_kbn_province));
  // 市下拉列表
  factoryplace.setcitylist(getplacelist(inforesult.getfactoryinfoex().getprovince(),factoryconsts.char_kbn_city));
  // 区下拉列表
  factoryplace.setarealist(getplacelist(inforesult.getfactoryinfoex().getcity(),factoryconsts.char_kbn_area));</span>
  
  <span style="color:#cc66cc;">mv.addobject("factoryplace", factoryplace);//地址的列表</span>
  <span style="color:#6633ff;">mv.addobject("factorycenterinfo", inforesult.getfactoryinfoex());//企业表的基本信息</span>
  mv.setviewname("factory/factoryinformationcenter/savefactorybaseinfo");
  return mv;
 }