jquery兄弟姐妹的限制

Question

我有一個窗體，有10左右的下拉菜單。其中兩個下拉列表與其他兩個下拉列表不同，我試圖找出如何在每個下拉列表中不讓用戶具有相同的值。

例如，

<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代碼循環，而不是僅僅兩個我要覈對。有沒有辦法做到這一點？

Answer 1

而不是

$(this).siblings().each(

使用

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

Answer 2

嘗試在您的來電兄弟姐妹某種謂詞來限制它只是這兩個選擇。

喜歡的東西

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

例如。

Answer 3

我已經改變了你的一點點html。

<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代碼：

$(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;  
    }); 


});