一個select標籤資料改變,另一個select標籤資料隨之改變
阿新 • • 發佈:2019-02-02
在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;
}
}
});
}