Как правильно выбрать дочерний элемент?

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. Я начал писать код, но он застрял при выборе необходимого ребенка. Также скорее всего не удастся использовать элементы по id, потому что форма очень большая.

ЯШ:

$('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