在頁面中有三個下拉框, 如何用JS實現, 當一個下拉框選中一個值時, 另外兩個下拉框對應的值變為不可選狀態, 例如, 當三個下拉框分別選中2,5,9時, 第一個下拉框無法選中5,9, 第二個下拉框無法選中2,9, 第三個下拉框無法選中2,5,效果如下:



先上HTML結構代碼:
<select id='a'> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <select id='b'> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <select id='c' > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select>
下面是JS代碼:
select_a=document.getElementById('a');
select_b=document.getElementById('b');
select_c=document.getElementById('c');
s_a_child=select_a.children;
s_b_child=select_b.children;
s_c_child=select_c.children;
//創建三個變量,用來分別接收被選中的option的索引值
var a= 0,b= 0,c=0;
//當selection標簽發生狀態改變時
select_a.onchange=function(){
//循環遍歷selection標簽
for (var i=0;i<s_a_child.length;i++) {
//當檢測到有標簽處於選中狀態時
if (s_a_child[i].selected) {
//先把上一個被選中的option標簽的disabled變為false
s_b_child[a].disabled=false;
s_c_child[a].disabled=false;
//再存儲這次選中的option標簽的索引值
a=i;
//再把這次選中的標簽的索引值得option的disabled變為true
s_b_child[i].disabled=true;
s_c_child[i].disabled=true;
}
};
};
select_b.onchange=function(){
for (var i=0;i<s_b_child.length;i++) {
if (s_b_child[i].selected) {
s_a_child[b].disabled=false;
s_c_child[b].disabled=false;
b=i;
s_a_child[i].disabled=true;
s_c_child[i].disabled=true;
}
}
}
select_c.onchange=function(){
for (var i=0;i<s_c_child.length;i++) {
if (s_c_child[i].selected) {
s_b_child[c].disabled=false;
s_a_child[c].disabled=false;
c=i;
s_b_child[i].disabled=true;
s_a_child[i].disabled=true;
}
};
};
