সিলেক্টর selected

সিলেক্টর :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');

আরও দেখুন