jQuery实现二级联动下拉框

项目需求，需要实现按照所选车队信息，对应司机下拉框中能够选择该车队下所有的司机信息。

样式如下：

<div id="takeform" title="物资提货" style="display:none;"><!-- 该Div的作用就是当点击jqGrid表格中的修改链接时弹出的dialog, 注意是在上面的Modify(id)函数中给下面的input赋值 --> 
<form action="pickUpGoods_saveOrUpdatePickUpGoods.do" method="post" enctype="multipart/form-data">

<table class="exhibit_table">

<tr>  
  <td style="width:80px; padding:10px;" align="right"></td>  
         <td><input type="hidden" id="goodsId" name="goodsId" /></td>  
     </tr>
            <tr>  
  <td style="width:80px; padding:10px;" align="right">合同号</td>

<td><input type="text" id="contractNum" readonly="readonly" name="contractNum" /></td>  
     </tr>
     <tr>  
  <td style="width:80px; padding:10px;" align="right">运输车队</td>
  <!-- 运输车队下拉列表 -->
  <td>
       <select id="Fleet" name="fleet" οnchange="getValue()" style="width:163px;">  <!--为车队下拉框绑定onchange事件，当用户改变车队选中内容时，触发onchange事件，从而获取并设置司机下拉框内容-->
   <!--<option value ="0">--请选择--</option>
   <option value ="2">车队2</option>
   <option value="3">车队3</option>
   <option value="4">车队4</option>
   <option value="5">车队5</option>-->

</select>
  </td>
     </tr>
     <tr>  
  <td style="width:80px; padding:10px;" align="right">司机</td>  
  <!-- 运输车队下拉列表 -->
  <td>
      <select id="Driver" name="driver" style="width:163px;">
   <!--<option value ="volvo">司机一</option>
   <option value ="saab">司机二</option>
   <option value="opel">司机三</option>
   <option value="audi">司机四</option>
   <option value="audi2">司机五</option>
      --></select>
  </td>  
     </tr>              
 </table> 
    </form>
</div>

样式确定后，通过ajax向后台请求数据，将得到的车队信息动态加载到运输车队下拉框中，如下：

/********取车队**********/
  $.ajax({
      async:false,
      cache:true,
             type: "GET",  
             url: "fleet_findFleet.do", //获取json数据  
             success: function(result){
   var result = eval('('+ result +')');
   if(result != undefined && result.length > 0){
                     for ( var i = 0; i < result.length; i++) {
    fleet_child={id:result[i].id, fleetName:result[i].fleetName};
                         var fleedValue = fleet_child.id;  
                         var fleedText = fleet_child.fleetName;  
                         var opt = "<option value='" + fleedValue + "'>" + fleedText + "</option>";  
                         $("#Fleet").append(opt);
                    } 
                }
                  },  
                  error: function() {  
                      alert("获取车队信息失败")  
                  }  
              });

由于车队信息是动态选取的，当用户没有选取车队时，直接点击司机下拉框时，此时司机下拉框是空，所以应该默认选取了某个车队信息，通过ajax向后台请求此车队下对应的司机信息，如下：

/********取司机**********/
  $.ajax({
      async:false,
      cache:true,
      url: "driver_findDriver.do?ownedFleet=1",//向后台发送请求时，默认参数为1，即请求所属车队为1下的所有司机信息
      type: 'GET',
      success: function(result){
   //alert(result);
   var result = eval('('+ result +')');
   if(result != undefined && result.length > 0){
       var driver_child;
       for ( var i = 0; i < result.length; i++) {
    driver_child = {id:result[i].id, driverName:result[i].driverName};
    var driverValue = driver_child.id;  
    var driverText = driver_child.driverName;  
    var opt = "<option value='" + driverValue + "'>" + driverText + "</option>";  
    $("#Driver").append(opt);   
       }
   }
      },
      error:function(e){alert("获取司机信息失败");}
  });

默认车队信息、司机信息加载完后，需实现当用户选取某个车队时，此时司机下拉框中的信息即为此车队下所属司机的信息，如下：

function getValue(){
   $("#Driver").html("");
   var obj = document.getElementById("Fleet");     //定位id
   var index = obj.selectedIndex;    // 选中索引
   var fleetText = obj.options[index].text;  // 选中文本
   var fleetValue = obj.options[index].value;  // 选中值
   $.ajax({
       async:false,
    cache:true,
    data: {ownedFleet:fleetValue},  //向后台发送请求时，传递参数ownedFleet
    url: "driver_findDriver.do",
    type: 'POST',
    success: function(result){
     //alert(result);
     var result = eval('('+ result +')');
     if(result != undefined && result.length > 0){
         var driver_child;
         for ( var i = 0; i < result.length; i++) {
      driver_child = {id:result[i].id, driverName:result[i].driverName};
      var driverValue = driver_child.id;  
       var driverText = driver_child.driverName;  
      var opt = "<option value='" + driverValue + "'>" + driverText + "</option>";  
      $("#Driver").append(opt);   
         }
     }
    },
    error:function(e){alert("获取司机信息失败");}
   });
      }

jQuery实现二级联动下拉框

浏览过的版块