Bộ chọn selected
Bộ chọn :selected chọn các phần tử
đã được chọn, tức là những phần tử có thuộc tính
selected.
Bộ chọn :selected hoạt động cho các phần tử có thẻ
option. Nó
không hoạt động với hộp kiểm
(checkbox) hoặc
nút chọn radio
(radio),
đối với chúng hãy sử dụng bộ chọn
checked.
Vì :selected không thuộc về đặc tả CSS,
nên để cải thiện hiệu suất trong các
trình duyệt hiện đại, tốt hơn là trước tiên hãy lọc các phần tử
bằng cách sử dụng bộ chọn css thuần túy, sau đó
áp dụng .filter(':selected').
Cú pháp
Chúng ta chọn các phần tử có
thuộc tính selected như thế này:
$(':selected');
Ví dụ
Hãy hiển thị mục được chọn dưới danh sách thả xuống
với màu xanh lá cây mỗi khi một mục được chọn.
Như bạn thấy, trước khi bạn nhấp lần đầu,
các mục được chọn theo mặc định sẽ được hiển thị,
đó là 'bbb' và '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');
