두 개의 드롭과 같은 값을 선택할 수 없습니다

Question

내가

<select name="indication_subject[]"> 
    <option value="" selected="selected">a </option> 
    <option> Accounting</option> 
    <option> Afrikaans</option> 
    <option> Applied Information and Communication Technology</option> 
    <option> Arabic</option> 
    <option> Art and Design</option> 
    <option> Biology</option> 
    <option> Business Studies</option> 
</select> 

<select name="indication_subject[]"> 
    <option value="" selected="selected">a </option> 
    <option> Accounting</option> 
    <option> Afrikaans</option> 
    <option> Applied Information and Communication Technology</option> 
    <option> Arabic</option> 
    <option> Art and Design</option> 
    <option> Biology</option> 
    <option> Business Studies</option> 
</select> 

Answer 1

난 당신이 요소를 선택하고 방법을 잘 모르겠어요이 양식에 두 번 같은 값을 선택에서 사용자를 방지하려는, 그래서 나는거야 간단하게 ID를 부여하십시오.

예 :http://jsfiddle.net/x4E5Q/1/

function preventDupes(select, index) { 
    var options = select.options, 
     len = options.length; 
    while(len--) { 
     options[ len ].disabled = false; 
    } 
    select.options[ index ].disabled = true; 
    if(index === select.selectedIndex) { 
     alert('You\'ve already selected the item "' + select.options[index].text + '".\n\nPlease choose another.'); 
     this.selectedIndex = 0; 
    } 
} 

var select1 = select = document.getElementById('select1'); 
var select2 = select = document.getElementById('select2'); 

select1.onchange = function() { 
    preventDupes.call(this, select2, this.selectedIndex); 
}; 

select2.onchange = function() { 
    preventDupes.call(this, select1, this.selectedIndex); 
}; 

HTML은

<select id="select1" name="indication_subject[]"> 
    <option value="" selected="selected">a </option> 
    <option> Accounting</option> 
    <option> Afrikaans</option> 
    <!-- ...and so on... --> 

<select id="select2" name="indication_subject[]"> 
    <option value="" selected="selected">a </option> 
    <option> Accounting</option> 
    <option> Afrikaans</option> 
    <!-- ...and so on... --> 

---

편집 :는 .disabled를 지원하지 않는 브라우저를 다루는 변경되었습니다. 신용은 @Zoidberg입니다.

Answer 2

궁극적으로 부동산을 구입할 수 있다면 라디오 버튼이나 체크 박스를 사용하여 최대 2 개의 체크 박스 만 선택할 수 있습니다. 나에게이 상황에서 드롭 다운이 작동하지 않는다.

그러나 부동산이없고 드롭 다운을 사용해야하는 경우 가장 좋은 방법은 첫 번째 드롭 다운에서 값을 선택하면됩니다. , 두 번째 드롭 다운에서 비활성화 또는 제거하거나 반대의 경우 (첫 번째 드롭 다운에서 값을 선택하는 경우). 제거하는 것과는 달리 비활성화하는 것이 좋습니다. 사용자에게 무엇이 진행되고 있는지가 분명해지기 때문입니다. 일찍

function updateSelect(changedSelect, selectId) { 
    var otherSelect = document.getElementById(selectId); 
    for (var i = 0; i < otherSelect.options.length; ++i) { 
     otherSelect.options[i].disabled = false; 
    } 
    if (changedSelect.selectedIndex == 0) { 
     return; 
    } 
    otherSelect.options[changedSelect.selectedIndex].disabled = true; 
} 

유일한 문제는

, IE 7로 이동하고

<select id="subject1" onchange="updateSelect(this,'subject2');" name="indication_subject[]"> 
    <option value="" selected="selected">a </option> 
    <option value="1"> Accounting</option> 
    <option value="2"> Afrikaans</option> 
    <option value="3"> Applied Information and Communication Technology</option> 
    <option value="4"> Arabic</option> 
    <option value="5"> Art and Design</option> 
    <option value="6"> Biology</option> 
    <option value="7"> Business Studies</option> 
</select> 

<select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" > 
    <option value="" selected="selected">a </option> 
    <option value="1"> Accounting</option> 
    <option value="2"> Afrikaans</option> 
    <option value="3"> Applied Information and Communication Technology</option> 
    <option value="4"> Arabic</option> 
    <option value="5"> Art and Design</option> 
    <option value="6"> Biology</option> 
    <option value="7"> Business Studies</option> 
</select> 

그런 다음 JS는 장애인 지원하지 않습니다. 이 것이 거래 차단기 인 경우 다른 선택 항목에서 옵션을 제거한 다음 나중에 교체해야합니다. 이 문제는 전체 목록을 새로 고치지 않으면 옵션의 순서가 변경된다는 점만 다릅니다. 전체 목록을 새로 고치려면 옵션과 값을 변경하지 않는 배열 (모델과 비슷한)에 저장해야하며 변경 이벤트가 발생할 때 선택 항목을 업데이트하는 데 사용해야합니다.

Answer 3

선택합니다

자바 스크립트 1. 및 id="indication_subject2"에 id="indication_subject1"를 추가,이 시도 :

$('#indication_subject1').change(function(){ 
    var indication_subject1 = $('#indication_subject1').val(); 
    var indication_subject2 = $('#indication_subject2').val(); 

    if (indication_subject1 == indication_subject1) 
     { 
      $('#indication_subject2').prop('selectedIndex',0);// val = "" selected, or you can add alert('Can't select same value!') 

     } 
}); 

$('#indication_subject2').change(function(){ 
    var indication_subject1 = $('#indication_subject1').val(); 
    var indication_subject2 = $('#indication_subject2').val(); 

    if (indication_subject2 == indication_subject1) 
    { 
     $('#indication_subject1').prop('selectedIndex',0); 
    } 
});