Question

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

我遇到的问题是，由于值都是重复的，我想禁用选择，IE。如果用户选择“Golf”，则应在priority2和priority3中禁用此项。此外，如果用户为priority2选择“Football”，则应禁用“Golf”和“Football”。

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/

禁用选择选项取决于另一个选择框

2 个答案: