禁用选择选项取决于另一个选择框 [英] Disable Select Option dependent on another Select Box

问题描述

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

I have three select boxes, that the user would choose in terms of priority. I have used sport for this example. At present I've set the css to hide the 2nd and 3rd priority selects until the first box has been completed and so on.

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

The issue I have is that as the values are all duplicate, i'd like to disable selection, IE. If a user selects "Golf", then this should be disabled in priority2, and priority3. In addition if a user selects "Football" for priority2 then both "Golf" and "Football" should be disabled.

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：

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中）;

Apologies for the quality of code, its only a start at the moment. I have tried to use the following to disable selection but not sure how to implement it. I would be grateful for any help with this (in 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）您可以使用以下

If you have the all select boxes with same class name and calling a function onchange=sel_box(this.value) you can use following

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

此处opt是您传递给sel_box（）函数的选项

here opt is option that you passed to sel_box() function

这篇关于禁用选择选项取决于另一个选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！