如何選擇正確的子元素？

Question

我有下一個HTML代碼：

<fieldset id="q1"> 
    <legend>Quest 1</legend> 
    <div class="a1"> 
    <label for="q2a1">Some text 1</label> 
    <select id="q2a1" name="q2a1"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
    </div> 
    <div class="a2"> 
    <select id="q2a2" name="q2a2"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
    <label for="q2a2">Some text 2</label> 
    </div> 
</fieldset> 

的基本思想：將兩個選擇的總和必須等於2

示例：如果我選擇在所述第一選擇器號2，第二個選擇器必須是可用的 只有0。如果我在第一個選擇器編號1中選擇，則第二個選擇器必須只有1，而第二個選擇器必須只有1個，反之亦然。 正如你所看到的標籤label可以位於select之前和之後。 我開始編寫代碼，但它堅持選擇一個必要的孩子。 也可能無法使用id的元素，因爲表格非常大。

JS：

$('select').change(function(event) { 
    var c; 
    c = 3 - $(this).val(); 
    options = ''; 
    for (var i = 0; i <= c; i++) { 
    options += '<option value="' + i + '">' + i + '</option>'; 
    } 
     alert($(this).parent().parent().html()); 
}); 

任何想法？謝謝。

Answer 1

你不必去尋找元素，你可以簡單地使用.val(value)和jQuery爲你做的辛勤工作：

$('select').bind('change keyup click', function(){ 
    var $this = $(this); 
    var $other = $this.closest('fieldset').find('select').not(this); 
    var selectedValue = parseInt($this.val(), 10); 
    $other.val(2 - selectedValue); 
}); 

我已經添加了keyup和click事件，以便它起着很好與鼠標和鍵盤。

工作示例：http://jsfiddle.net/7TX86/1