一个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;            }        }     });  }