JQuery API: :selected Selector
Selected Selector sẽ lựa chọn tất cả các phần tử đã được lựa chọn(selected). Selected Selector sẽ chỉ hoạt động đối với các thẻ option của thẻ select . Nó không hoạt động với thẻ checkbox hay thẻ input radio , sử dung :checked cho các thẻ này. ...
Selected Selector sẽ lựa chọn tất cả các phần tử đã được lựa chọn(selected).
Selected Selector sẽ chỉ hoạt động đối với các thẻ option của thẻ select. Nó không hoạt động với thẻ checkbox hay thẻ input radio, sử dung :checked cho các thẻ này.
Chú ý: Bởi vì :selected là một Jquery extension và không phải là một phần thiết lập của CSS, các truy vấn sử dụng :selected sẽ không thể phát huy hiệu quả của phương thức querySelectorAll(). Để đạt được hiệu quả cao nhất, đầu tiên bạn nên sử dụng một selector được hỗ trợ bởi CSS sau đó sử dụng .filter(":selected") để lọc lại kết quả.
Cú pháp
jQuery( ":selected" )
Ví dụ
Tìm kiếm các phần tử option đã được seleceted và hiển thị giá trị của chúng:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại code24h.com</title>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<select name="garden" multiple="multiple">
<option>PHP</option>
<option selected="selected">CSS</option>
<option>HTML</option>
<option selected="selected">PYTHON</option>
<option>JAVASCRIPT</option>
<option>C#<option>
</select>
<hr>
<div id="result"></div>
<hr>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
var str = ';
$("option:selected").each(function() {
str += $( this ).text() + " ";
});
$("#result").html('Các ngôn ngữ đã biết:' + str);
}
</script>
</body>
</html>Trong ví dụ này, mình có sửu dụng .each() để lặp qua tất cả các kết quả trả về từ selector :selected.
Kết quả:
Tham khảo: jquery.com
Nguồn: code24h.com
