জাভাস্ক্রিপ্টে ড্রপডাউন তালিকার সাথে কাজ করা

এই পাঠে আমরা select ট্যাগের সাথে কাজ করা শিখব, যা একটি ড্রপডাউন তালিকা প্রতিনিধিত্ব করে। আপনি যদি এইচটিএমএলে এই ট্যাগের সাথে কাজ করতে না জানেন, তবে প্রথমে এই লিঙ্কের রেফারেন্সে এর গঠন শিখুন: select।

জাভাস্ক্রিপ্টের মাধ্যমে এই ট্যাগের সাথে কীভাবে কাজ করতে হয় তা দেখা যাক। ধরুন আমাদের নিম্নলিখিত这样一个 একটি ড্রপডাউন তালিকা দেওয়া হয়েছে:

html<select id="select">
  <option>one</option>
  <option selected>two</option>
  <option>three</option>
</select>

একটি ভেরিয়েবলে সিলেক্টের একটি রেফারেন্স পাই:

javascriptlet select = document.querySelector('#select');

এখন সিলেক্ট পরিবর্তন হলে তালিকার নির্বাচিত আইটেমের টেক্সট স্ক্রিনে প্রিন্ট করি। এটি করার জন্য আমাদের সিলেক্টের value প্রপার্টি পড়তে হবে:

javascriptselect.addEventListener('change', function(){
  console.log(this.value);
});