2011-12-29 4 views
2

У меня есть три окна выбора, которые пользователь будет выбирать с точки зрения приоритета. Я использовал спорт для этого примера. В настоящее время я установил 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; 
//}  
     //} 

ответ

1

Я не думаю, что вы можете установить параметры как видимые/скрытые в css, но вы можете их отключить.

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

EDIT

100% не подвергал сомнению, что. Был только обеспокоен вашим методом скрытия/показа.

Это должно делать то, что вы ищете http://jsfiddle.net/RaBuQ/1/

На самом деле просто понял, что это ошибка. Посмотрите, сможете ли вы это получить. Если нет, я немного обновлю.

EDIT 2

Это должно получить вам то, что вам нужно. http://jsfiddle.net/RaBuQ/5/

EDIT 3

Это не чисто Javascript (Jquery еще), но я хотел ответить, чтобы быть полным к вашей спецификации. Если у меня будет время, я могу повторно посетить с помощью чистого ответа на javascript, но не ждите меня. Если вы его заработаете, обязательно отправьте ответ на свой вопрос. Удачи!

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

+0

Спасибо, но это не совсем то, что мне нужно.Я знаю, как вручную отключить параметры в html, однако, поскольку это цельный выбор, мне нужно, чтобы он забирал то, что было выбрано из 1-го варианта, и отключил это из блоков выбора приоритета 2 и 3. Поэтому потребность в javascript – skippy

+0

@ Bandon Многие из них за вашу помощь. Отличная работа, но не то, что им после a), если использует jquery и b) пользователи по-прежнему могут выбирать одно и то же значение, работающее назад (например, выберите первое поле, выберите третье поле и выберите второе поле с тем же значением, что и третье). Спасибо за вашу помощь, я оценил ваш ответ. – skippy

+0

Спасибо за вашу помощь снова, jquery работает фантастически. Я положил это на задний план и работал над другими элементами проекта, обновляюсь с помощью javascript, как только я получу свою голову вокруг него – skippy

2

Если у вас есть все выберите коробки с таким же именем класса и вызова функции onchange=sel_box(this.value) вы можете использовать следующие

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

здесь неавтоматического является вариант, который передается sel_box() функции

Смежные вопросы