Селектор selected

Селекторът :selected избира елементи, които са избрани, тоест тези, които имат атрибут selected. Селекторът :selected работи за елементи с таг option. Той не работи с чекбокси (checkbox) или радио бутони (radio), за тях използвайте селектор checked. Тъй като :selected не принадлежи към CSS спецификацията, за подобряване на производителността в съвременните браузъри е по-добре първо да филтрирате елементи с използването на чист css-селектор, а след това да приложите .filter(':selected').

Синтаксис

Така избираме елементи с атрибут selected:

javascript$(':selected');

Пример

Нека, при всеки избор на пункт в падащото меню, да се показва под менюто в зелен цвят. Както виждате, преди първото ви кликване ще бъдат показани пунктове, избрани по подразбиране, това са 'bbb' и 'ddd':

html<select name="texts" multiple="multiple">
  <option>aaa</option>
  <option selected="selected">bbb</option>
  <option>ccc</option>
  <option selected="selected">ddd</option>
  <option>eee</option>
  <option>fff</option>
</select>
<div></div>

cssdiv {
  color: green;
}

javascript$('select')
  .change(function() {
    let str = '';
    
    $('select option:selected').each(function() {
      str += $(this).text() + ' ';
    });
    
    $('div').text(str);
  }).trigger('change');

Вижте също