Отключить опцию выбора в зависимости от другого окна выбора

Question

У меня есть три поля выбора, которые пользователь выберет с точки зрения приоритета. Я использовал спорт для этого примера. В настоящее время я установил css, чтобы скрыть 2-й и 3-й приоритеты, пока не будет завершено первое поле и т. Д.

Проблема, с которой я столкнулся, заключается в том, что, поскольку все значения дублируются, я бы хотел отключить выбор, т.е. Если пользователь выбирает «Гольф», то это должно быть отключено в priority2 и priority3. Кроме того, если пользователь выбирает «Футбол» в качестве приоритета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);

здесь опция - опция, которую вы передали функции 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/