Ajax技术实现三级联动下拉框

【前台代码】

1、script部分

 

function funAgency(combo, record, index){
    var agencySelect = $("#agencyId");
    var witnessSelect = $("#witnessId");
    
    witnessSelect.html("");
    $("<option value=''>请选择...</option>").appendTo(witnessSelect);
    
    var id = record.get('id');
    $.post("certRel_initAgency.action",{nmAgencyTypeId:id},function(data){
     if (data.length != 0) {
      agencySelect.html("");
      $("<option value=''>请选择...</option>").appendTo(agencySelect);
      for (var i = 0; i < data.length; i++) {
       $("<option value='" + data[i].value + "'>" + data[i].text + "</option>").appendTo(agencySelect);
      }
     } else {
      agencySelect.html('');
      witnessSelect.html('');
      $("<option value=''>请选择...</option>").appendTo(agencySelect);
      $("<option value=''>请选择...</option>").appendTo(witnessSelect);
     }
    }, "json");
   }
   
   $(document).ready(
    function(){
     var agencySelect = $("#agencyId");
     var witnessSelect = $("#witnessId");
     
     var nmEaLabelId = "<%=request.getParameter("nmEaLabelId")%>";
     if (nmEaLabelId != null && nmEaLabelId.length > 0 && nmEaLabelId != "null")
     {
      $("#agencyId").html("");
      $("#witnessId").html("");
      $("<option value='<%=request.getAttribute("nmAgencyId")%>'><%=request.getAttribute("stAgencyName")%></option>").appendTo(agencySelect);
      $("<option value='<%=request.getAttribute("nmWitnssId")%>'><%=request.getAttribute("stWitnssName")==null?"":request.getAttribute("stWitnssName")%></option>").appendTo(witnessSelect);
      $("#labelWordId").val("<%=request.getAttribute("stLabelWord")==null?"":request.getAttribute("stLabelWord")%>");
     }
     
     agencySelect.change(
      function(){
       var val = agencySelect.val();
       $.post("certRel_initWitness.action",{nmAgencyId:val},function(data){
        if (data.length != 0){
         $("#labelWordId").html("");
         $("#labelWordId").val(data[0].stLabelWord=='null'?'':data[0].stLabelWord);
         $("#stLabelContentId").html("");
         $("#stLabelContentId").val(data[0].clLabelTemContent=='null'?'':data[0].clLabelTemContent);
         if(data[0].value != '') {
          witnessSelect.html("");
          $("<option value=''>请选择...</option>").appendTo(witnessSelect);
          for (var i = 0; i < data.length; i++) {
           $("<option value='" + data[i].value + "'>" + data[i].text + "</option>").appendTo(witnessSelect);
          }
          
         }else{
          witnessSelect.html('');
          $("<option value=''>请选择...</option>").appendTo(witnessSelect);
         }
        }else{
         witnessSelect.html('');
         $("<option value=''>请选择...</option>").appendTo(witnessSelect);
        }
       }, "json");
      }
     );
     
     witnessSelect.change(
      function(){
       var stWitnessName = witnessSelect.find("option:selected").text();
       var stLabelContent = $("#stLabelContentId").val();
       stLabelContent = stLabelContent.replace(/name/g,stWitnessName)
       $("#stLabelContentId").html(stLabelContent);
      }
     );
    }
   );

2、html部分

第一个下拉框：

<cw:combobox property="nmAgencyTypeId" value="${stAgencyType}" id="agencyTypeId" onSelect="funAgency" label="机构类型" required="true" fields="fields" emptyText="请选择..." url="loadCodeInfo.action" urlParams="{CODE:'AGENCY_TYPE',TYPE:'SYS_DICT',WITHBLANK:'1'}" displayField="name" valueField="id" />  

第二个下拉框：

<select name="nmAgencyId" id="agencyId" style="width:180px">
       <option value=''>请选择...</option>
      </select>

第三个下拉框：

<select name="nmWitnssId" id="witnessId" style="width:180px">
       <option value=''>请选择...</option>
      </select>

 

【后台代码】

 

 public String initAgency(){
  try {
   super.getServletResponse().setCharacterEncoding("GB2312");
   
   String nmAgencyTypeId = super.getServletRequest().getParameter("nmAgencyTypeId");
   String data ="[]";
   String temp = "";
   
   EagencyInfoVo eagencyInfoVo = new EagencyInfoVo();
   if(!StringUtil.isEmpty(nmAgencyTypeId)){
    eagencyInfoVo.setNmAgencyTypeId(Long.parseLong(nmAgencyTypeId));
    List<EagencyInfo> lst = eagencyInfoService.findAll(eagencyInfoVo,null);
    if(lst != null){
     for(EagencyInfo eagencyInfo : lst){
      temp += "{'value':'" + eagencyInfo.getNmAgencyId() + "','text':'" + eagencyInfo.getStAgencyName() + "'},";
     }
    }
    if(temp.length()>0){
     temp = temp.substring(0,temp.length()-1);
    }
    if(temp.length()>0){
     data = "[" + temp + "]";
    }
   }
   
   super.getServletResponse().getWriter().write(data);
  } catch (Exception e1) {
   e1.printStackTrace();
  }
  return AJAX;
 }
 
 public String initWitness(){
  try {
   super.getServletResponse().setCharacterEncoding("GB2312");
   
   String nmAgencyId = super.getServletRequest().getParameter("nmAgencyId");
   String data ="[]";//[{'name':'0','value':'孝感'},{'name':'2','value':'麻糖'}]
   String temp = "";
   
   WitnessInfoVo witnessInfoVo = new WitnessInfoVo();
   if(!StringUtil.isEmpty(nmAgencyId)){
    witnessInfoVo.setNmAgencyId(Long.parseLong(nmAgencyId));
    List<WitnessInfo> lst = witnessInfoService.findAll(witnessInfoVo, null);
    if(lst != null && lst.size()>0){
     int i=0;
     for(WitnessInfo witnessInfo : lst){
      EagencyInfo eagencyInfo = this.eagencyInfoService.view(Long.parseLong(nmAgencyId));
      String stLabelWord = "";
      if(eagencyInfo != null){
       stLabelWord = eagencyInfo.getStLabelWord();
      }
      
      LabelTemInfo labelTemInfo = labelTemInfoService.view(eagencyInfo.getNmAgencyLabelId());
      String clLabelTemContent = "";
      if(labelTemInfo != null){
       clLabelTemContent = labelTemInfo.getClLabelTemContent();
      }
      
      if(clLabelTemContent.indexOf("seal")>0){
       clLabelTemContent = clLabelTemContent.replace("seal", stLabelWord);
      }
      
      if(i==0){
       temp += "{'clLabelTemContent':'" + clLabelTemContent + "','stLabelWord':'" + stLabelWord + "','value':'" + witnessInfo.getNmWitnssId() + "','text':'" + witnessInfo.getStWitnssName() + "'},";
      
      }else{
       temp += "{'value':'" + witnessInfo.getNmWitnssId() + "','text':'" + witnessInfo.getStWitnssName() + "'},";
      }
      i++;
     }
     if(temp.length()>0){
      temp = temp.substring(0,temp.length()-1);
     }
     if(temp.length()>0){
      data = "[" + temp + "]";
     }
    }else{
     EagencyInfo eagencyInfo = this.eagencyInfoService.view(Long.parseLong(nmAgencyId));
     String stLabelWord = eagencyInfo.getStLabelWord();
     temp += "{'stLabelWord':'" + stLabelWord + "','value':''}";
     data = "[" + temp + "]";
    }
   }
   
   super.getServletResponse().getWriter().write(data);
  } catch (Exception e1) {
   e1.printStackTrace();
  }
  return AJAX;
 }