HTML 목록 상자에서 하나의 옵션 사용 안 함

Question

동일한 옵션을 표시하는 3 개의 목록 상자가 있습니다. 목록 상자에서 선택된 다른 두 개의 목록 상자에서 옵션을 비활성화하고 싶습니다. 내 사용자가 먼저 목록 상자를 이동하게하고 싶습니다. 어떤 도움을 주셔서 감사합니다.

Answer 1

다음과 같은 HTML이있는 경우 :

<select id="select1"> 
    <option value="">Choose</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select> 

<select id="select2"> 
    <option value="">Choose</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select> 

<select id="select3"> 
    <option value="">Choose</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select> 

당신이 (JQuery와의 도움으로) 할 수 있습니다 : 당신이 연주하는

var previousValues = [] 
    $selects = $('#select1, #select2, #select3'); 

$selects 
    .mousedown(function(e) { 
     // save the previous value for re-enabling it when you change 
     var val = $(this).val(); 
     if (val) { 
      previousValues[this.id] = val; 
     } 
    }) 
    .change(function(e) { 
     // get the other select elements 
     var $theOtherSelects = $selects.not('#' + this.id), 
      prevVal = previousValues[this.id], 
      val = $(this).val(); 

     // re-enable the previously disabled option 
     if (prevVal) { 
      $theOtherSelects 
       .find('option[value=' + prevVal + ']') 
       .prop('disabled', false); 
     } 

     // if a value is selected, disble in the other selects    
     if (val) { 
      $theOtherSelects 
       .find('option[value=' + val + ']') 
       .prop('disabled', true); 
     } 
    }) 
    .mousedown() 
    .change(); 

여기 jsfiddle을합니다.

주은 : 훨씬 쉽기 때문에 나는 크로스 브라우저를 작동, jQuery를 사용했습니다, 당신은 당신이 명시 적으로 사용하지 않았다 지정하지 않았습니다.

Answer 2

각 옵션마다 고유 한 속성을 설정할 수 있습니다 (값이 충분할 수 있습니다. 그렇지 않으면 클래스가 좋은 선택입니다). jQuery를 사용하여 선택 항목 중 하나에서 선택 될 때 jQuery를 사용하여 다른 두 옵션에서 하나의 옵션을 선택하고 삭제할 수 있습니다.

편집 : 다음은 원하는 라인을 따라 수행하는 예입니다. 당신은 그것을 약간 수정해야 할 것입니다. 디디에의 대답은 당신이 원하는 것에 더 가깝습니다.

http://jsfiddle.net/baByZ/39/