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

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

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

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

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

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

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

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

একটি সিলেক্ট, একটি অনুচ্ছেদ এবং একটি বাটন দেওয়া আছে। বাটনে ক্লিক করলে তালিকার নির্বাচিত আইটেমের টেক্সটটি অনুচ্ছেদে দেখান।

2020 থেকে 2030 পর্যন্ত বছরের একটি ড্রপডাউন তালিকা তৈরি করুন। তালিকার কোনো একটি আইটেম নির্বাচন করলে একটি বার্তা দেখান যে বছরটি অধিবর্ষ কিনা।