HTML DOM Datalist options কালেকশন

HTML DOM Datalist options কালেকশন HTML <datalist> এলিমেন্টের ভিতরে থাকা অপশন ভ্যালু কালেকশন সেট বা রিটার্ন করতে ব্যবহৃত হয়। এলিমেন্টগুলো ডকুমেন্টে যেভাবে থাকে সেভাবেই ক্রমানুসারে থাকে।

প্রপার্টি

Datalist options কালেকশনের প্রপার্টি নিচে দেওয়া হলো -

মেথড

Datalist options কালেকশনের মেথডগুলো নিচে দেওয়া হলো -

সিনট্যাক্স

Datalist options কালেকশনের সিনট্যাক্স নিচে দেওয়া হলো -

datalistObject.options

উদাহরণ

Datalist options কালেকশনের একটি উদাহরণ দেখি -

<!DOCTYPE html> <html> <body> <h2>Datalist option elements example</h2> <form> <input list="fruits"> <datalist id="fruits"> <option value="Papaya"> <option value="Strawberry"> <option value="Guava"> <option value="Mango"> </datalist> </form> <p>নিচের বাটনে ক্লিক করুন ডেটালিস্ট অপশন এলিমেন্টের সংখ্যা দেখতে</p> <button onclick="elementNo()">COUNT</button> <p id="Sample"></p> <script> function elementNo() { var fLength = document.getElementById("fruits").options.length; document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options"; } </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে -

COUNT বাটনে ক্লিক করলে (আপনি ডেটালিস্টে ক্লিক করেই এলিমেন্টগুলো গণনা করতে পারেন) -

আমরা "fruits" ভ্যালু সহ list অ্যাট্রিবিউটের একটি ইনপুট বক্স তৈরি করেছি যাতে এটি একই আইডি 가진 ডেটালিস্টের সাথে লিংক থাকে। এর মানে হলে যখন আমরা ইনপুট বক্সে টাইপ করব ডেটালিস্ট আমাদের ইনপুট টেক্সটকে একটি অপশন ভ্যালু দিয়ে কমপ্লিট করার চেষ্টা করবে। "fruits" আইডি সহ একটি ডেটালিস্ট তৈরি করা হয়েছে যার ভিতরে চারটি অপশন ভ্যালু রয়েছে। ডেটালিস্ট এবং এর লিংক করা ইনপুট বক্স দুটোই ফর্মের ভিতরে রয়েছে -

<form> <input list="fruits"> <datalist id="fruits"> <option value="Papaya"> <option value="Strawberry"> <option value="Guava"> <option value="Mango"> </datalist> </form>

তারপর আমরা একটি COUNT বাটন তৈরি করেছি যা ইউজার ক্লিক করলে elementNo() মেথড এক্সিকিউট করবে -

<button onclick="elementNo()">COUNT</button>

elementNo() মেথড getElementById() মেথড ব্যবহার করে ডেটালিস্টের options.length প্রপার্টি ভ্যালু পেয়ে ভেরিয়েবল fLength-এ অ্যাসাইন করে। অপশন কাউন্ট ভ্যালুটি তারপর "Sample" আইডি 가진 প্যারাগ্রাফে এর innerHTML প্রপার্টি ব্যবহার করে দেখানো হয়েছে -

function elementNo() { var fLength = document.getElementById("fruits").options.length; document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options"; }