禁用依赖于另一个选择框的选择选项

Question

我有三个选择框，用户可以根据优先级进行选择。我在这个例子中使用了运动。目前，我已将 css 设置为隐藏第二和第三优先级选择，直到第一个框完成，依此类推。

我遇到的问题是，由于这些值都是重复的，我想禁用选择，IE。如果用户选择“高尔夫”，则应在优先级2和优先级3中禁用它。此外，如果用户选择“足球”作为优先级2，则“高尔夫”和“足球”都应被禁用。

HTML：

    <form>

<table>
<tr><td>
<label for="Priority">Please state your priorities</label></td><td>1st PRIORITY
<select class="formSelect" name="priority1" onChange="p1(priority1);" onClick="p1(priority1);" width="175px" id="priority1" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>

<td>2nd PRIORITY
<select name="priority2" class="chidden" onChange="p2(priority2);" onClick="p2(priority2);" width="175px" id="priority2" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>

<td>3rd PRIORITY
<select name="priority3" class="chidden" width="175px" id="priority3" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>


</tr>


</table></form>

CSS：

.chidden {visibility: hidden;}
.cvisible {visibility: visible;}

Javascript：

var priority1 = document.getElementById("priority1");
var priority2 = document.getElementById("priority2");
var priority3 = document.getElementById("priority3");

function p1(priority1) {

if(document.getElementById("priority1").selectedIndex > 0){  

      document.getElementById("priority2").className="cvisible";


  }
 else{
document.getElementById("priority2").className="chidden";
 document.getElementById("priority2")[0].selected = "1";
 document.getElementById("priority3").className="chidden";
 document.getElementById("priority3")[0].selected = "1";
 }
}

function p2(priority2) {

if(document.getElementById("priority2").selectedIndex > 0){  

      document.getElementById("priority3").className="cvisible";
  }
 else{
document.getElementById("priority3").className="chidden";
 document.getElementById("priority3")[0].selected = "1";
 }
}

对代码质量表示歉意，目前这只是一个开始。我尝试使用以下方法来禁用选择，但不确定如何实现它。我将不胜感激任何有关这方面的帮助（用Javascript）；

        //for (var i=0; i< document.getElementById("priority2").length; i++){

        //if(document.getElementById("priority1").selectedIndex == document.getElementById("priority2")[i]){
         //   document.getElementById("priority2")[i].disabled = true;
//}     
      //}

Answer 1

如果您的所有选择框具有相同的类名并调用函数
onchange=sel_box(this.value) 您可以在此处使用以下

$('.chidden option[value="'+opt+'"]').attr("disabled", true);

选项 opt 是您传递给 sel_box() 函数的选项

Answer 2

我不认为你可以在CSS中将选项设置为可见/隐藏，但你可以禁用它们。

请参阅：http://www.w3schools.com/tags/tryit.asp?filename =tryhtml_option_disabled

编辑

100% 没有质疑这一点。只关心你隐藏/显示的方法。

这应该可以满足您的要求
http://jsfiddle.net/RaBuQ/1/

实际上刚刚意识到有一个错误。看看你能不能得到它。如果没有的话我会稍后更新。

编辑2

这应该可以满足您的需求。 http://jsfiddle.net/RaBuQ/5/

编辑3

这个不是纯javascript（仍然是jQuery），但我希望答案能够完整地符合您的规范。如果我有时间，我可能会用纯 javascript 答案重新访问，但不要等我。如果你成功了，请确保你发布了你自己问题的答案。祝你好运！

http://jsfiddle.net/RaBuQ/8/