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

Disable Select Option dependent on another Select Box

本文关键字：选择 选项 另一个 依赖于      更新时间：2023-09-26

我有三个选择框，用户可以根据优先级进行选择。我以体育运动为例。目前，我已经将css设置为隐藏第二和第三优先级选择，直到第一个框完成，等等。

我遇到的问题是，由于值都是重复的，我想禁用选择，IE。如果用户选择"Golf"，则应该在优先级2和优先级3中禁用此功能。另外，如果用户在优先级2中选择了"足球"，那么"高尔夫"answers"足球"都应该被禁用。

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;
//}     
      //}

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

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

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

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

见:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled

编辑

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

这应该是你想要的http://jsfiddle.net/RaBuQ/1/

刚刚发现有个bug。看看你能不能弄到。如果没有，我会更新一点。

编辑2

这应该能得到你所需要的。http://jsfiddle.net/RaBuQ/5/

编辑3

这不是纯javascript(仍然是jQuery)，但我希望答案是完整的你的规范。如果我有时间，我可能会重新访问一个纯javascript的答案，但不要等我。如果你让它工作，确保你张贴你自己的问题的答案。好运！

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

相关文章：