Селектор 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');

Смотрите также