다른 드롭 다운을 기반으로 드롭 다운에서 항목을 제외하는 방법

Question

나는 3 개의 동일한 드롭 다운이 있습니다. 나는 drop1에서 값을 선택하고 그 값을 drop2에서 제외시키고 싶습니다. 그런 다음 drop3의 선택 항목은 1을 제외해야합니다. & 2. 어떤 아이디어입니까?

<select name="drop1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<select name="drop2"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<select name="drop3"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 

Answer 1

PHP 또는 AJAX를 얼마나 편안하게 사용하는지에 따라 두 가지 해결책이 있습니다. 당신이 PHP 더 편안 경우 사용자가 사용하여 다음 중 하나를 선택 양식에서 데이터를 입력하고있을 수 있다면

if $value != '1'{ 
echo '<option value="1">1</option>'; 
} 

두 번째 형태의 각 필드에 대해 그렇게 같은 문장; 세 번째 형식으로 복제하십시오.

보다 매끄러운 솔루션은 AJAX를 사용하여 청취자가 필드를 클릭하면 해당 필드로 자바 값이 설정되고 자바 스크립트 변수에서 비슷한 "if then show"메소드를 사용하여 숨기는 것을 볼 수 있습니다 그 값을 다른 서식에 포함하고있는 필드

또한 가장 쉬운 해결책 중 하나는 다중 선택을 허용하는 것입니다 (하나의 양식을 사용하여 모양이 좋다고 가정 할 경우 & 양식 사이의 값은 위의 예제와 동일합니다). :

<select id="my_num" name="my_num" size="5" multiple="multiple" > 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
</select> 

Answer 2

당신은 변경 이벤트를 사용하고 더 복잡한 예를 가지고 당신이 복제를 만들 수 있습니다 explude 기반 값이 필요한 경우 DOM

$('select[name=drop1]').change(function() { 
    var drop2 = $('select[name=drop2]').empty().hide(); 
    var exclude = $(this).val(); 
    var size = $(this).children().length; 
    for (var i=0; i<size; ++i) { 
     if (i != exclude) { 
      drop2.append('<option value="' + i + '">' + i + '</option>'; 
     } 
    } 
}); 

에서 선택한 요소를 제거 할 수 있습니다.

var clone = $('select[name=drop2]').clone(); 
$('select[name=drop1]').change(function() { 
    var copy = clone.clone(); 
    copy.find('option[value=' + $(this).val() + ']').remove().end(); 
    $('select[name=drop2]').replaceWith(copy); 
});