一个select标签数据改变，另一个select标签数据随之改变

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

 }