কিভাবে জাভাস্ক্রিপ্ট দিয়ে ড্রপডাউন মান পাবেন

আপনি যখন ওয়েব ফর্মগুলি তৈরি করতে শিখছেন, তখন সবচেয়ে সাধারণ কাজগুলির মধ্যে একটি হল ড্রপডাউন থেকে মানগুলি পাওয়া৷ এই প্রবন্ধে আমরা জানব কিভাবে জাভাস্ক্রিপ্ট দিয়ে এই ধরনের মান পেতে হয়।

ড্রপডাউন HTML উপাদান

আসুন এইচটিএমএল ব্যবহার করে কীভাবে একটি ড্রপডাউন উপাদান তৈরি করতে হয় সে সম্পর্কে একটি দ্রুত সংক্ষিপ্ত বিবরণ দেওয়া যাক। আপনি হারিয়ে গেলে আমার কোডপেন অনুসরণ করুন।

আমাদের ড্রপডাউন উপাদান তৈরি করার জন্য আমাদের select ব্যবহার করতে হবে ট্যাগ করুন এবং option ব্যবহার করুন শিশুরা এর নিচে বাসা বাঁধে। নির্বাচিত উপাদানটি ড্রপডাউন তৈরি করে এবং বিকল্প ট্যাগগুলির সাথে আমরা সেই বিকল্পগুলিকে সংজ্ঞায়িত করি যেগুলি ড্রপডাউনে টিকে থাকবে৷

আসুন আমাদের প্রিয় ফলগুলির একটি ড্রপডাউন তৈরি করি (যেটিতে ইমোজি রয়েছে)।

<select name="fruits" id="fruits">
  <option value="">--select--</option>
  <option value="avocado">Avocado🥑</option>
  <option value="watermelon">Watermelon🍉</option>
  <option value="kiwi">Kiwi🥝</option>
  <option value="tomato">Tomato🍅</option>
</select>
<h2 id="pick"></h2>

আমরা একটি খালি h2 যোগ করেছি যা আমরা পরে জাভাস্ক্রিপ্ট দিয়ে পূরণ করব। এই মুহুর্তে আপনি আপনার পছন্দের ফলটি বেছে নিতে পারেন:

মান বৈশিষ্ট্যের গুরুত্ব লক্ষ্য করুন . এই বৈশিষ্ট্যটি আমাদের অ-শৈলীকৃত ডেটা দেয় যা আমরা সহজেই জাভাস্ক্রিপ্টের সাথে খেলতে পারি। অন্যদিকে অপশন ট্যাগের ভিতরের পাঠ্যটি মোটামুটি কিছু হতে পারে, তাই এটি নির্ভরযোগ্য নয়। মূল্য বৈশিষ্ট্য এখানে গুরুত্বপূর্ণ।

জাভাস্ক্রিপ্টের মাধ্যমে ড্রপডাউন মান নির্বাচন করা এবং প্রদর্শন করা

প্রথমে আমাদের getElementById ব্যবহার করে আমাদের ফল ড্রপডাউন নির্বাচন করতে হবে সিলেক্ট ট্যাগে।

const element = document.getElementById("fruits");

এখন যেহেতু আমাদের ড্রপডাউনটি নির্বাচিত হয়েছে আমরা বর্তমানে নির্বাচিত বিকল্পটির মান পেতে পারি। এটি ডিফল্টরূপে প্রথম বিকল্প। আসুন এটি চেষ্টা করি:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

const checkValue = element.options[element.selectedIndex].value;
const checkText = element.options[element.selectedIndex].text;

এখানে আমরা উপাদান বিকল্প অ্যারে অ্যাট্রিবিউট অ্যাক্সেস করছি। তারপরে আমরা বর্তমানে নির্বাচিত বিকল্পের সূচী নির্বাচন করি এবং এর মান বা পাঠ্য অ্যাক্সেস করি।

এখন উভয় ভেরিয়েবল console.log করার চেষ্টা করুন। কি ঘটেছে? কিছুই না। কেন? কারণ আমাদের প্রথম উপাদানটির একটি খালি মান রয়েছে (এটি কেবল একটি স্থানধারক)। প্রথম বিকল্পটি মন্তব্য করুন এবং আবার চেষ্টা করুন। হ্যাঁ! আমরা জাভাস্ক্রিপ্টের সাথে মান এবং পাঠ্য উভয়ই পাই।

জাভাস্ক্রিপ্টের সাথে ড্রপডাউন পরিবর্তনের জন্য শোনা

আমাদের ড্রপডাউনকে গতিশীল করা উচিত যেহেতু জাভাস্ক্রিপ্ট আপনার পৃষ্ঠায় পরিবর্তনের জন্য প্রতিক্রিয়া জানাতে ডিজাইন করা হয়েছে। এটি মাথায় রেখে আমরা একটি eventListener বরাদ্দ করব আমাদের ফলের উপাদানে।

element.addEventListener("change", (e) => {
  const value = e.target.value;
  const text = element.options[element.selectedIndex].text;
 
  if (value) {
    document.getElementById("pick").textContent = `Value Selected: ${value}`;
  } else {
    document.getElementById("pick").textContent = "";
  }
});

আমাদের eventListener এর সাথে আমরা আমাদের ড্রপডাউন পরিবর্তনের জন্য শুনছি। e.target.value করে আপনি কীভাবে নির্বাচিত বিকল্পের মান পেতে পারেন তা নোট করুন। , এটি আপনি সম্ভবত ফর্ম সম্পর্কে অন্য টিউটোরিয়ালে দেখেছেন৷

আমরা পৌঁছে গেছি। এখন আপনি যেকোন ফলের বিকল্প নির্বাচন করতে পারেন এবং জাভাস্ক্রিপ্ট আমাদের ড্রপডাউনের পরিবর্তনে প্রতিক্রিয়া জানাচ্ছে এবং সেই অনুযায়ী আমাদের h2 আপডেট করছে। খুব ফলপ্রসূ ডান!

উপসংহার

ওয়েব ডেভেলপমেন্ট শেখার সাথে সাথে ড্রপডাউন মান পাওয়া একটি গুরুত্বপূর্ণ দক্ষতা। আমরা যে মানগুলি পাই তা গুরুত্বপূর্ণ যদি আমরা একটি ডাটাবেস আপডেট করতে চাই, ব্যবহারকারীকে নির্বাচন দেখাতে চাই বা DOM পরিবর্তনগুলিতে 'প্রতিক্রিয়া' করতে চাই। জাভাস্ক্রিপ্টের সাহায্যে আমরা অল্প সময়ের মধ্যেই এই ধরনের মান পেতে পারি।