jquery로 동적 드롭 다운

Question

페이지에 3 개의 드롭 다운 선택자를 표시하는 페이지가 있습니다. 한 옵션을 선택하면 다른 두 드롭 다운에서 동일한 옵션을 선택할 수 없도록 확인하는 jQuery 코드도 있습니다.

코드를 변경하여 복제 선택을 중지하지 말고 선택한 옵션을이 아래의 다른 드롭 다운에서 완전히 제거해야합니다. 모든 옵션을 배열에 넣고 다음 드롭 다운을 생성 할 때 목록에서 제거해야한다고 가정합니다.

다른 방법으로 이미 선택한 색상을 다른 색상으로 표시해야 할 수도 있습니다.

$('.mySelect').change(function(index, elem){ 
    var myFilter = $(this).val(); 
    if(myFilter !="selectOne"){ 
     var size = $('.qSelect').not(this).not(function(index){ 
     return $(this).val() != myFilter; 
    }).size(); 
     if(size > 0){ 
      alert("already selected."); 
     } else { 
      // do something 
     } 
    } 
}); 

<select name="select1" class="mySelect"> 
    <option value="selectOne">Select one</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
</select> 

<select name="select2" class="mySelect"> 
    <option value="selectOne">Select one</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
</select> 

<select name="select3" class="mySelect"> 
    <option value="selectOne">Select one</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
</select> 

Answer 1

배열을 만들고 항목을 제거/다시 삽입하는 대신 적절한 양식 필드 동작을 사용하고 옵션을 '비활성화 됨'으로 설정할 수 있습니다. 요소를 제거하면 사용자에게 혼동을 줄 수 있습니다.

당신은 이동하여이 작업을 수행 할 수 있습니다 :

$('.mySelect').bind('change', function(el) { 

    var _this = $(this), 
     newVal = _this.val(); 
    $('select.mySelect:not([name=' + _this.attr('name') + ']) 
      option[value=' + _this.data('oldVal') + ']').attr('disabled', false); 
    $('select.mySelect:not([name=' + _this.attr('name') + ']) 
      option[value=' + newVal + ']').attr('disabled', true); 
    _this.data('oldVal', newVal); 

}); 

(http://jsfiddle.net/KT856/)

을 변경할 수 있습니다 ".attr (사실, '장애인')"당신이 결정할 무엇을 적 치료를 적용 할 수 있습니다. - 또한

난 당신뿐만 아니라 서버 측에서이 유효성을 검사한다고 가정)

편집 : 다른 선택의 해당 옵션을 다시 활성화하기 위해이 "이전 선택"을 저장하도록 업데이트 스크립트를 경우 선택 사항이 변경됩니다.

주의 :이 방법은 사용자가 옵션을 선택하는 순서와 상관없이 작동합니다.

Answer 2

어떤 jQuery의 remove function가 attribute-equals-selector와 함께 사용하는 방법에 대한 :

여기에 내 현재 코드입니까? 그래서 변화에 다른 드롭 다운을 통과하고 Btw는이

option[value=myFilter]

같은 옵션을 제거하십시오. 사용자가 세 번째 드롭 다운에서 먼저 선택하면 어떻게됩니까?