如何选择正确的子元素？

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