selected 선택자
선택자 :selected는
selected 속성을 가진,
즉 선택된 요소를 선택합니다.
선택자 :selected는
option 태그를 가진 요소에 작동합니다.
체크박스
(checkbox)나
라디오 버튼
(radio)에는 작동하지 않으며,
이를 위해서는
checked 선택자를 사용하세요.
:selected는 CSS 사양에 속하지 않기 때문에,
현대 브라우저에서 성능을 향상시키려면 먼저 순수 CSS 선택자를 사용하여 요소를 필터링한 다음
.filter(':selected')를 적용하는 것이 좋습니다.
문법
다음은
selected 속성을 가진 요소를 선택하는 방법입니다:
$(':selected');
예제
드롭다운 목록에서 항목을 선택할 때마다 그 항목을 목록 아래에 초록색으로 표시해 봅시다.
첫 번째 클릭 전에 기본적으로 선택된 항목인
'bbb'와 'ddd'가 표시되는 것을 볼 수 있습니다:
<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>
div {
color: green;
}
$('select')
.change(function() {
let str = '';
$('select option:selected').each(function() {
str += $(this).text() + ' ';
});
$('div').text(str);
}).trigger('change');
