المحدد :selected في jQuery
المحدد :selected
الوصف
يحدِّد جميع العناصر المُحدَّدة.
jQuery( ":selected" )
أُضيف مع الإصدار: 1.0.
يُستعمَل المحدِّد :selected خصِّيصًا مع العناصر <option>، ولا يعمل مع مربعات الاختيار (checkboxes) أو أزرار الانتقاء (radio buttons)، لذا استعمل معهم المحدِّد :checked.
ملاحظات إضافية
لمَّا كان المحدِّد :selected هو ملحق في مكتبة jQuery وليس جزءًا من مواصفة CSS، فإنَّ الاستعلامات التي تستعمل :selected لا يمكنها الاستفادة من سرعة الأداء الذي يوفره تابع DOM الأصلي querySelectorAll(). للحصول على أداء أفضل في المتصفحات الحديثة، حدِّد العناصر باستعمال محدِّدات CSS الصرفة (pure) ثمَّ استعمل التابع .filter(" :selected ").
أمثلة
ربط الحدث change بالعنصر <select> الذي يجلب المحتوى النصي لكل خيار محدَّد ثمَّ يضيفه إلى العنصر <div>. يعيد بعد ذلك استدعاء نفسه لإعادة الخطوات نفسها من جديد عند إعادة تحديد الخيارات:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selected مثالٌ عن استعمال المحدد</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select name="garden" multiple="multiple">
<option>ثمار</option>
<option selected="selected">شجيرات</option>
<option>أشجار</option>
<option selected="selected">أغصان</option>
<option>عشب</option>
<option>جذور</option>
</select>
<div></div>
<script>
$( "select" )
.change(function() {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text( str );
})
.trigger( "change" );
</script>
</body>
</html>