ওয়েব ফর্ম বানাতে শিখার সময় ড্রপডাউন থেকে ভ্যালু নেওয়া একটি সাধারণ কাজ। এই আর্টিকেলে জাভাস্ক্রিপ্ট দিয়ে ড্রপডাউন ভ্যালু কীভাবে নেয়া যায় তা দেখানো হয়েছে।
ড্রপডাউন HTML এলিমেন্ট
<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>
গুরুত্বপূর্ণ: value অ্যাট্রিবিউটটিই জাভাস্ক্রিপ্টের জন্য विश्वস্ত ডেটা। টেক্সট কন্টেন্ট পরিবর্তন হতে পারে।
জাভাস্ক্রিপ্ট দিয়ে ভ্যালু সিলেক্ট এবং দেখানো
const element = document.getElementById("fruits");
const value = element.options[element.selectedIndex].value;
const text = element.options[element.selectedIndex].text;
চেঞ্জ ইভেন্ট লিসেনার (Event Listener)
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 = "";
}
});
এখন ড্রপডাউন পরিবর্তন করলে রিয়েল-টাইম আউটপুট দেখাবে।
উপসংহার
ড্রপডাউন ভ্যালু নেওয়া ওয়েব ডেভেলপমেন্টের অতिआবশ্যক স্কিল। value প্রপার্টি ব্যবহার করুন এবং change ইভেন্ট লিসেন করুন।
