কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে সিলেক্ট অপশন সিলেক্ট হলে হিডেন div কীভাবে দেখাবেন?

সিলেক্ট অপশন সিলেক্ট হলে হিডেন div দেখানোর জন্য style.display প্রোপার্টিকে block সেট করুন।

উদাহরণ

নিচে কোডটি দেওয়া হলো:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style>    #hideValuesOnSelect {       display: none;    } </style> <body> <select onchange="displayDivDemo('hideValuesOnSelect', this)"> <option value="0">Java</option> <option value="1">Javascript</option> </select> <div id="hideValuesOnSelect">This is the Javascript</div> </body> <script>    function displayDivDemo(id, elementValue) {       document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';    } </script> </html>

প্রোগ্রামটি চালানোর জন্য, ফাইলটি যেকোনো নাম দিয়ে সংরক্ষণ করুন (যেমন: index.html) এবং ফাইলটিতে ডান ক্লিক করে VS Code এডিটরে Open with live server অপশনটি নির্বাচন করুন।

এটি নিচের আউটপুটটি দেবে:

জাভাস্ক্রিপ্টে সিলেক্ট অপশন সিলেক্ট হলে হিডেন div কীভাবে দেখাবেন?

যখন আপনি দ্বিতীয় অপশন (JavaScript) সিলেক্ট করবেন, হিডেন divটি দেখাবে।

আউটপুট

এটি নিচের আউটপুটটি দেবে:

জাভাস্ক্রিপ্টে সিলেক্ট অপশন সিলেক্ট হলে হিডেন div কীভাবে দেখাবেন?

  1. জাভাস্ক্রিপ্টে বাটন ক্লিকে div লুকানো

  2. জাভাস্ক্রিপ্টে সিলেক্ট লিস্টের ভ্যালু অ্যারেতে আছে কিনা চেক করে কনসোলে দেখানো

  3. জাভাস্ক্রিপ্টে ড্রপডাউন (সিলেক্ট) সিলেক্টেড ভ্যালু কনসোলে দেখানো

  4. জাভাস্ক্রিপ্টে HTML এলিমেন্টের স্ক্রিনশট নেওয়া