用JS实现,当一个下拉框选择一个值时,另外两个下拉框的对应的值变为不可选
在页面中有三个下拉框, 如何用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;
}
};
};
浙公网安备 33010602011771号