jQuery селектор :selected

Определение и применение

Селектор :selected выбирает элементы <option>, выбранные в данный момент. Он проверяет свойство selected, а не исходный HTML-атрибут: выбор пользователя также учитывается.

jQuery синтаксис:

JavaScript

$(":selected")

Добавлен в версии jQuery

1.0

Селектор в CSS

Это селектор jQuery, он не является частью спецификации CSS.

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

Селектор :selected — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<select name="cars" multiple="">
  <!--раскрывающийся список в котором может быть выбрано несколько значений (атрибут multiple) -->
  <option value="Opel">Opel</option>
  <option value="Volvo">Volvo</option>
  <option value="BMW" selected="">BMW</option>
  <!-- параметр должен быть предварительно выбран при загрузке (атрибут selected) -->
  <option value="Mercedes" selected="">Mercedes</option>
  <!-- параметр должен быть предварительно выбран при загрузке (атрибут selected) -->
</select>

main.js

JavaScript

$(document).ready(function () {
    $(':selected').css('border-left', '3px solid red') // выбираем все элементы <option>, которые имеют логический атрибут selected
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}