다른 선택 상자에 따라 선택 옵션 사용 안 함

Question

사용자가 우선 순위로 선택할 수있는 세 개의 선택 상자가 있습니다. 나는이 예를 위해 스포츠를 사용했다. 현재 나는 첫 번째 상자가 완료 될 때까지 두 번째 및 세 번째 우선 순위를 숨기기 위해 CSS를 설정했습니다.

문제점은 값이 모두 중복되어 IE를 사용하지 못하게하려는 것입니다. 사용자가 "골프"를 선택하면 priority2 및 priority3에서이 기능을 사용하지 않아야합니다. 또한 사용자가 우선 순위 2에 대해 "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;} 

자바 스크립트 : 코드의 품질, 순간의 단지 시작에 대한

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

CSS에서 표시/숨김으로 옵션을 설정할 수는 없지만 사용을 중지 할 수 있다고 생각합니다.

은 참조 :

100 %가 의문을 제기하지 않은 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled

편집 할 수 있습니다. 귀하의 숨기기/표시 방법에 대해서만 우려했습니다.

이것은 당신이 http://jsfiddle.net/RaBuQ/1/

실제로 단지 버그가 실현 무엇을 찾고 있는지해야한다. 당신이 그것을 얻을 수 있는지보십시오. 그렇지 않다면 나는 조금씩 업데이트 할 것이다.

편집 2

이 당신이 필요로하는 무엇을 얻어야한다. http://jsfiddle.net/RaBuQ/5/

EDIT 3

이 순수 자바 스크립트 (여전히 jQuery를)하지 않습니다,하지만 난 당신의 사양에 완료된 것으로 대답을 원했다. 시간이 있으면 순수한 자바 스크립트 응답으로 다시 방문 할 수 있지만 나를 기다리지는 마세요. 작동 시키면 자신의 질문에 대한 답변을 게시하십시오. 행운을 빕니다!

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

Answer 2

당신은 동일한 클래스 이름과 전화 기능 onchange=sel_box(this.value)와 모든 선택 상자가있는 경우는

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

를 사용할 수 있습니다 여기에 선택 하는 sel_box() 함수

에 전달 된 옵션입니다