2012-05-29 2 views
0

10 개가 넘는 드롭 다운 메뉴가있는 양식이 있습니다. 이 두 가지 드롭 다운은 다른 것과 다르며 사용자가 이러한 드롭 다운에서 동일한 값을 갖지 못하게하는 방법을 파악하려고합니다. 예를 들어 Jquery 형제 제한

,
<select id="z_one"> 
    <option>1</option> 
    <option>1</option> 
    <option>1</option> 
</select> 

<select id="z_two"> 
    <option>1</option> 
    <option>1</option> 
    <option>1</option> 
</select> 

만이 두 선택을 반복하는 방법이 아닌 다른 사람과 일치하는 값을 확인?

$('select[id^=z_]').change(function() { 
    var value = $(this); 
    $(this).siblings().each(function() { //this checks all siblings. do not want. 
    if ($(this).val() == value.val()) { 
     alert("You can't select the same value twice."); 
     return false; 
     } 
    }); 
}); 

이 jquery 코드는 확인하고 싶은 두 개의 페이지가 아니라 페이지의 모든 선택 사항을 반복합니다. 이것을 할 수있는 방법이 있습니까? 대신

$(this).siblings().each(

사용

$(this).next('select[id^=z_]').each(

답변

1

.

뭔가 예를 들어

this.siblings("[id = 'z_two']")

있다.

1

은 단지 두 선택을 제한하는 형제 자매로 통화 술어의 일종을 시도의

0

나는 당신의 html을 약간 바꿨다.

$(function(){ 

    $('.groupA').change(function(){ 

     var currentID = this.id; 
     var currentVal = $(this).val(); 

     var $options = $('option','.groupA'); 
     var $jThis = $(this); 

     var isMatched = false; 

     $.each($options,function(index,element){ 

      if(element.parentNode.id != currentID){ 

       var $prevDropDown = $('#' + element.parentNode.id); 

       if($prevDropDown.val() == currentVal){ 

        $jThis.get(0).selectedIndex = 0; 
        alert("You can't select the same value twice."); 
        isMatched = true; 
        return false; // to break out from $.each 
       } 


      } 
     }); 

     if(isMatched) 
      return false;  
    }); 


}); 
: 여기
<select id="z_one" class='groupA'> 
    <option>Select an element</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

<select id="z_two" class="groupA"> 
    <option>Select an element</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

는 JS 코드