Блог

Я пытаюсь выбрать следующий <option> , содержащий определенный текст.

Вот мой сценарий:

 <select id="stock">
    <option>Blue</option>
    <option>-Small</option>
    <option>-Medium</option>
    <option>-Large</option>
    <option>Black</option>
    <option>-Small</option>
    <option>-Medium</option>
    <option>-Large</option>
    <option>Red</option>
    <option>-Small</option>
    <option>-Medium</option>
    <option>-Large</option>
</select>
  

Я могу легко найти цвет, используя это:

 $('#stock').find('option:contains('Black')').attr('selected','selected');
  

Но тогда я хотел бы выбрать размер, который находится непосредственно после этого цвета. Я пытался использовать next () следующим образом:

 $('#stock').find('option:contains('Black')').next('option:contains('Medium')').attr('selected','selected');
  

Но, по-видимому, next () выбирает только элемент сразу после. Итак, я попробовал nextAll (), но он выбирает обе среды после черного. Итак, затем я попытался использовать first () после nextAll, но это тоже не сработало. Ничего не выбрано.

 $('#stock').find('option:contains('Black')').nextAll('option:contains('Medium')').first().attr('selected','selected');
  

Я упускаю что-то очевидное? Спасибо за вашу помощь!

Обновление: теперь он работает, добавляя селектор :first в nextAll(). Спасибо за ваши комментарии.

 $('#stock').find("option:contains('Black')").nextAll("option:contains('Medium'):first").attr('selected','selected');
  

Вы хотите использовать группы опций для вашего выбора, поскольку они созданы для такого рода выделений и, возможно, помогут вам выбрать правильный элемент, также используя Javascript.

Затем вы можете использовать следующий jQuery

 $('#stock').find('optgroup[label="Black"]').find('option:contains("Medium")').attr('selected', 'selected')
  

Или посмотрите это http://jsfiddle.net/HYydJ /

jQuery.fn.next() выбирает только СЛЕДУЮЩИЙ одноуровневый элемент. Если вы предоставляете селектор, он выбирает следующий сиблинг только в том случае, если селектор совпадает (не первый сиблинг, который совпадает). Это имеет больше смысла, когда вы начинаете думать о наборах, содержащих более одного совпадения (например, если вы сделали $('p').next('a') — все a теги, следующие за p )

jQuery.fn.first() просто возвращает первый элемент в существующем наборе (это не фильтр).

Простым ответом, если вы не хотите использовать opt groups, как предложила Виндия (вероятно, лучший ответ), было бы сделать следующее:

 function findNextSize($node, size) {
   var $next = $node.next();
   while( $next.length ) {
      if( $next.html().substr(1) === size ) {
          return $next;
      }
   }
   return null;
}

findNextSize( $('#stock').find('option:contains('Black')'), 'Medium' );
  

Это некрасиво, но сразу после этого будут выбраны черный вариант и средний вариант —

 $('#stock').find("option:contains('Black')").attr('selected','selected').nextAll("option:contains('Medium')").first().attr('selected','selected');
  

Демонстрация — http://jsfiddle.net/NBhm7 /