jquery - 如何选择正确的子元素？

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。反之亦然。正如您所看到的，标签 label 可以位于 select 之前和之后。我开始编写代码，但它坚持选择一个必要的 child 。也可能无法通过 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