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');

참고 항목