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;
 }

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 下拉框三级联动是一种常见的前端交互方式,可以通过AJAX实现。具体实现步骤如下: 1. HTML布局:使用select标签实现三个下拉框 ```html <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区县</option> </select> ``` 2. JavaScript代码:使用jQuery库实现AJAX请求和DOM操作 ```javascript $(function(){ // 获取省份列表 $.ajax({ url: 'province.php', type: 'get', dataType: 'json', success: function(data){ // 遍历省份列表,添加到下拉框中 $.each(data, function(index, item){ $('#province').append('<option value="' + item.id + '">' + item.name + '</option>'); }); } }); // 省份下拉框改变事件 $('#province').change(function(){ var provinceId = $(this).val(); if(provinceId){ // 获取城市列表 $.ajax({ url: 'city.php', type: 'get', data: {provinceId: provinceId}, dataType: 'json', success: function(data){ // 清空城市和区县下拉框 $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区县</option>'); // 遍历城市列表,添加到下拉框中 $.each(data, function(index, item){ $('#city').append('<option value="' + item.id + '">' + item.name + '</option>'); }); } }); }else{ // 清空城市和区县下拉框 $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区县</option>'); } }); // 城市下拉框改变事件 $('#city').change(function(){ var cityId = $(this).val(); if(cityId){ // 获取区县列表 $.ajax({ url: 'district.php', type: 'get', data: {cityId: cityId}, dataType: 'json', success: function(data){ // 清空区县下拉框 $('#district').empty().append('<option value="">请选择区县</option>'); // 遍历区县列表,添加到下拉框中 $.each(data, function(index, item){ $('#district').append('<option value="' + item.id + '">' + item.name + '</option>'); }); } }); }else{ // 清空区县下拉框 $('#district').empty().append('<option value="">请选择区县</option>'); } }); }); ``` 3. 服务器端代码:根据省份和城市的ID获取对应的城市和区县列表,返回JSON格式数据 省份列表查询代码(省份表结构:id、name): ```php <?php // 连接数据库 $conn = mysqli_connect('localhost', 'root', '123456', 'test'); mysqli_set_charset($conn, 'utf8'); // 查询省份列表 $sql = 'select id, name from province'; $result = mysqli_query($conn, $sql); $data = array(); while($row = mysqli_fetch_assoc($result)){ $data[] = $row; } // 返回JSON格式数据 header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); mysqli_close($conn); ?> ``` 城市列表查询代码(城市表结构:id、name、province_id): ```php <?php // 连接数据库 $conn = mysqli_connect('localhost', 'root', '123456', 'test'); mysqli_set_charset($conn, 'utf8'); // 获取省份ID $provinceId = $_GET['provinceId']; // 查询城市列表 $sql = 'select id, name from city where province_id = ' . $provinceId; $result = mysqli_query($conn, $sql); $data = array(); while($row = mysqli_fetch_assoc($result)){ $data[] = $row; } // 返回JSON格式数据 header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); mysqli_close($conn); ?> ``` 区县列表查询代码(区县表结构:id、name、city_id): ```php <?php // 连接数据库 $conn = mysqli_connect('localhost', 'root', '123456', 'test'); mysqli_set_charset($conn, 'utf8'); // 获取城市ID $cityId = $_GET['cityId']; // 查询区县列表 $sql = 'select id, name from district where city_id = ' . $cityId; $result = mysqli_query($conn, $sql); $data = array(); while($row = mysqli_fetch_assoc($result)){ $data[] = $row; } // 返回JSON格式数据 header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); mysqli_close($conn); ?> ``` 以上代码仅供参考,具体实现需要根据实际情况进行调整。 ### 回答2: Ajax实现下拉框三级联动的主要步骤如下: 1. 配置HTML页面:在HTML页面中创建三个下拉框的元素,并分别设置一个id,用于后续的JavaScript操作。 2. 编写JavaScript代码:使用JavaScript监听第一个下拉框的改变事件。当第一个下拉框选中的选项发生改变时,触发事件处理程序。 3. 使用Ajax发送异步请求:在事件处理程序中,使用Ajax发送异步请求到服务器,以获取与第一个下拉框选中选项相关联的第二个下拉框选项。 4. 服务器端处理请求:服务器端根据第一个下拉框选中的选项,查询数据库或者调用API,获取与之相关联的第二个下拉框选项,并将数据以JSON格式返回给前端。 5. 更新第二个下拉框选项:前端接收到服务器返回的数据后,使用JavaScript动态添加或替换第二个下拉框的选项。 6. 同样地,在第二个下拉框的改变事件中,触发事件处理程序,并通过Ajax发送异步请求获取与第二个下拉框选中选项相关联的第三个下拉框选项。 7. 更新第三个下拉框选项:前端接收到服务器返回的数据后,使用JavaScript动态添加或替换第三个下拉框的选项。 通过以上步骤,就可以实现下拉框三级联动效果。需要注意的是,要正确处理在选择某个下拉框选项时,下级下拉框的选项需要相应改变。另外,在发送Ajax请求时需要考虑兼容性和请求的性能,可以使用jQuery等库来简化代码,并提高发送请求的效率。 ### 回答3: Ajax实现下拉框三级联动的原理是通过前端页面的JavaScript代码和后端服务器之间的异步请求来实现数据的动态加载和更新。 首先,我们需要创建三个下拉框元素,分别用于显示一级、二级和三级的选项。通过监听一级下拉框的变化事件,我们可以在JavaScript代码中获取到用户选择的一级选项的值。 接下来,我们需要使用Ajax技术向后端服务器发送异步请求,获取对应一级选项的二级选项数据。通过Ajax发送GET或POST请求,并将一级选项的值作为参数传递给后端服务器,服务器根据参数的值查询数据库或其他数据源,返回对应的二级选项数据。 当从服务器端获取到二级选项数据后,我们可以使用JavaScript动态地更新二级下拉框的选项。此时,我们同样需要监听二级下拉框的变化事件,以获取用户选择的二级选项的值。 然后,我们再次使用Ajax技术向后端服务器发送异步请求,获取对应二级选项的三级选项数据。服务器根据二级选项的值查询数据库或其他数据源,返回对应的三级选项数据。 当从服务器端获取到三级选项数据后,我们可以使用JavaScript动态地更新三级下拉框的选项。 通过以上操作,我们就可以实现下拉框三级联动效果。用户选择一级选项后,二级选项会根据一级选项的值进行动态更新;用户选择二级选项后,三级选项会根据二级选项的值进行动态更新。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值