在jsp頁面的時候，出現了一個這樣的需求。有兩個select標籤，一個select標籤資料變化，另外一個select標籤隨之變化。
jsp頁面程式碼：

<tr id="suppUserId1">
  <td><font color="red" style="margin-right:10px">*</font>配送員:</td>
<td class="td2">
    <select name="suppUserId" id="suppUserId" style="width: 150px;height: 22px"
 
 onchange="selectSupp()">
    </select> 
</td>
</tr>       
<tr>
    <td><font color="red" style="margin-right:10px">*</font>配送員對應的供應商:</td>
    <td class="td2">
    <select name="suppId" id="suppId" style="width: 150px;height: 22px">
    </select
 
> 
    </td>
</tr>   

對應的頁面是：

根據配送員的下拉框，下面的配送員對應的供應商部分，就會隨之變化。
下面是有關的js程式碼：

//查詢配送員繫結的供應商
function selectSupp(){
    var oSel = document.getElementById("suppId");//獲取供應商的下拉資訊
    var oOp = oSel.children; //獲取select列表的所有子元素。
        for(var i=0,len = oOp.length;i<len;i++)   
        {//將供應商的下拉選單的資料清除
 

            oSel.removeChild(oOp[i]);  //迴圈刪除所有子元素
        }
    var objS = document.getElementById("suppUserId");//獲取配送員的資訊
    var suppUserId = objS.options[objS.selectedIndex].value;//獲取配送員下拉選定的資料
     //根據地址和配送員資訊傳送一個ajax查詢，獲取相應的配送員資訊
     $.ajax({
         url:'delOr.do?method=selectBdSupp',
         data:{
                shouhuoxiaoid:shouhuoxiaoid,
                suppUserId:suppUserId
                },
        success : function(data) {//將查詢到的供應商資訊放在供應商的select標籤框中
            if(data.length!=0){//繫結的供應商顯示
                for(var i=0;i<data.length;i++){
                    $("#suppId").append("<option value = "+data[i].id+">"+data[i].supplier_Name+"</option>");
                }
            }else{
                document.getElementById("suppUserId").innerHTML
                = "<option value = "+""+">"+null+"</option>" ;
                document.getElementById("suppId").innerHTML
                = "<option value = "+""+">"+null+"</option>" ;
                 $.messager.alert('分配配送單', '配送員沒有繫結的供應商','info');
                return;
            }
        }
     }); 

 }