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" onchange="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");     //定位idvar index = obj.selectedIndex; // 选中索引var fleetText = obj.options[index].text; // 选中文本var fleetValue = obj.options[index].value; // 选中值$.ajax({    async:false,cache:true,data: {ownedFleet:fleetValue},//向后台发送请求时，传递参数ownedFleeturl: "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("获取司机信息失败");}});    }