Выбор следующего меню выбора после события изменения в первом меню выбора в jQuery / Rails

Question

Я пытаюсь высушить некоторые jQuery на странице, которая имеет несколько динамических селекций на основе ajax (очень похоже на автоматические веб-сайты, где вы выбираете марку, модель и т.д. динамически). Моя страница выглядит примерно так:

<p>
  <label>...</label>
  <select id="selectA">...</select>
</p>
<p>
  <label>...</label>
  <select id="selectB">...</select>
</p>

А мой jQuery выглядит так:

<code>
$("select#selectA").change(function(){
  // If this works, selectB should turn red.
  $(this).next().css('background-color', 'red');
});

Но selectB никогда не становится красным. Я пробовал различные комбинации вещей для селекторов, такие как "select", "p select", "p select#id", и "select#id" как в начальном, так и в next() полях селектора. Я что-то упускаю из виду? Спасибо!

Answer 1

Попробуйте это:

$(this).parent().next().children('select').css('background-color', 'red');

Также, если вы добавляете элементы динамически, вам может потребоваться переключиться на live:

$("select").live('change',function(){
  // if this works...
  $(this).parent().next().children('select').css('background-color', 'red');
});

Редактировать: Если вы можете, используйте классы CSS для ваших выборов, которые должны быть связаны с этим. Это намного проще (и полезно в некоторых ситуациях). Допустим, вы добавите класс CSS ajaxselect. Вы можете изменить эту функцию на:

$('.ajaxselect').live('change',function(){
  // if this works...
  $(this).parent().next().children('.ajaxselect').css('background-color', 'red');
});

Edit2: Вы можете увидеть рабочий пример здесь .