HTML DOM ডেটালিস্ট বিকল্প সংগ্রহ

HTML DOM ডেটালিস্ট বিকল্প সংগ্রহটি HTML উপাদানের মধ্যে উপস্থিত বিকল্প মান সংগ্রহ সেট বা ফেরানোর জন্য ব্যবহৃত হয়। নথিতে উপাদানগুলি একই ক্রমে উপস্থিত হয়৷

সম্পত্তি

Datalist অপশন কালেকশন -

-এর সম্পত্তি নিচে দেওয়া হল

সম্পত্তি	বিবরণ
দৈর্ঘ্য	সংগ্রহে

পদ্ধতি

ডাটালিস্ট অপশন সংগ্রহের পদ্ধতি −

নিচে দেওয়া হল

পদ্ধতি	বিবরণ
[সূচী]	নির্দিষ্ট সূচকে উপস্থিত সংগ্রহ থেকে
আইটেম(সূচী)	প্রদত্ত সূচকের সাথে সংগ্রহ থেকে
namedItem(id)	প্রদত্ত আইডি সহ সংগ্রহ থেকে

সিনট্যাক্স

Datalist অপশন কালেকশন -

-এর সিনট্যাক্স নিচে দেওয়া হল

datalistObject.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>Click the below button to display the number of datalist option elements</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>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM ডেটালিস্ট বিকল্প সংগ্রহ

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

HTML DOM ডেটালিস্ট বিকল্প সংগ্রহ

আমরা একই আইডি দিয়ে ডেটালিস্টের সাথে লিঙ্ক করতে অ্যাট্রিবিউট তালিকা মান "ফল" সহ একটি ইনপুট বক্স তৈরি করেছি। এর মানে আমরা যখন ইনপুট বক্সে টাইপ করি তখন ডেটালিস্ট একটি বিকল্প মান সহ আমাদের ইনপুট পাঠ্য সম্পূর্ণ করার চেষ্টা করবে। আইডি "ফল" সহ একটি ডেটালিস্ট তৈরি করা হয়েছে এবং এটির ভিতরে চারটি বিকল্প মান রয়েছে। ডেটালিস্ট এবং এর লিঙ্কযুক্ত ইনপুট বক্স উভয়ই ফর্মের ভিতরে উপস্থিত থাকে −

<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-এ বরাদ্দ করে। বিকল্প গণনা মান তারপর অনুচ্ছেদে আইডি "নমুনা" এর অভ্যন্তরীণ HTML বৈশিষ্ট্য ব্যবহার করে প্রদর্শিত হয় -

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