동일한 옵션으로 여러 개의 드롭 다운 : 다른 드롭 다운에서 하나의 드롭 다운에서 현재 선택된 항목을 제거하는 방법은 무엇입니까?

Question

내 응용 프로그램에 정확하게 동일한 옵션 목록을 보여주는 여러 개의 <select> 드롭 다운이 있습니다. 해당 드롭 다운 중 하나에서 항목을 선택하면 선택한 항목이 다른 드롭 다운에서 제거됩니다. JavaScript로 어떻게 이것을 할 수 있습니까?

Answer 1

당신은, 요소의 값 속성을 식별 한 후 마지막으로 사용하는 옵션을 제거, 동일한 값의 속성 값을 갖는 하나 찾기 위해 자신의 모든 내용을 반복하는 모든 선택 요소를 반복 할

:

option.parentElement.removeChild(option); 

을 양자 택일로, 당신은 jQuery를 사용할 수 있습니다 : 같은 일을 수행

$(document).on('change','select',function(){ 
    $(this).addClass('exception'); 
    $('option[value="' + this.value + '"]:not(.exception *)').remove(); 
    $(this).removeClass('exception'); 
}); 

http://jsfiddle.net/PCvT4/

합니다. 여기서 내가 예상 할 수있는 문제는 몇 가지 선택 사항을 수행 한 후에 옵션이 부족할 것이라는 것입니다. 당신은 너무 같은 옵션을 사용하지 않도록 시도 할 수 :

$(document).on('change','select',function(){ 
    $('option[value="disabled"]').prop('disabled',false); 
    $(this).addClass('exception'); 
    $('option[value="' + this.value + '"]:not(.exception *)').prop('disabled',true); 
    $(this).removeClass('exception'); 
}); 

http://jsfiddle.net/ZrsC6/

Answer 2

이 시도 :

$(document).ready(function() { 
    $("select").change(function() { 
     var self=this; 

     $("select").each(function() { 
      if (this===self) { 
       return; 
      } 

      $(this).prop('selectedIndex',0); 
     }); 
    }); 
});​ 

Working fiddle