Только выделенные элементы

Материал из JQuery

Текущая версия на 11:29, 28 февраля 2014

Соответствует всем элементам со статусом selected. Это могут быть выбранные элементы типа <option>. Для поиска выбранных checkbox и radio элементов, этот селектор НЕ подойдет.

Примеры использования:

Селектор :selected является надстройкой библиотеки jQuery, а не частью официальной css спецификации (как большинство других селекторов). Поэтому, при поиске, jQuery не сможет использовать быструю нативную функцию querySelectorAll(). Для наилучшей производительности подойдет следующий вариант:

// не самый быстрый вариант
$( '.some-hint:selected' );

// эффективнее будет
$( '.some-hint' ).filter(':selected');

В действии

~lt~!doctype html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    div {
      color: red;
    }
  ~lt~/style~gt~
  ~lt~script src="//code.jquery.com/jquery-1.10.2.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
 
  ~lt~select name="garden" multiple="multiple"~gt~
    ~lt~option~gt~Flowers~lt~/option~gt~
    ~lt~option selected="selected"~gt~Shrubs~lt~/option~gt~
    ~lt~option~gt~Trees~lt~/option~gt~
    ~lt~option selected="selected"~gt~Bushes~lt~/option~gt~
    ~lt~option~gt~Grass~lt~/option~gt~
    ~lt~option~gt~Dirt~lt~/option~gt~
  ~lt~/select~gt~
  ~lt~div~gt~~lt~/div~gt~
 
  ~lt~script~gt~
  $( "select" )
    .change(function() {
      var str = "";
      $( "select option:selected" ).each(function() {
        str += $( this ).text() + " ";
      });
      $( "div" ).text( str );
    })
    .trigger( "change" );
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

• Остальные селекторы элементов формы
• Список всех селекторов
• $( ) — функция jQuery