HTML DOM ডেটালিস্ট অবজেক্ট

HTML DOM Datalist অবজেক্টটি HTML5 উপাদানের সাথে যুক্ত।

সিনট্যাক্স

নিচের সিনট্যাক্স −

ডেটালিস্ট অবজেক্ট −

তৈরি করতে

var p = document.createElement("DATALIST");

ডেটালিস্ট অবজেক্ট -

অ্যাক্সেস করতে

var p = document.getElementById("demoDatalist");

উদাহরণ

আসুন HTML DOM Datalist অবজেক্ট -

-এর একটি উদাহরণ দেখি

<!DOCTYPE html>
<html>
<head>
<title>DATALIST</title>
<style>
   button{
      margin-top:90px;
   }
</style>
</head>
<body>
<h2>Datalist object example</h2>
<p>Click the below button to create a datalist element with options</p>
<form id="FORM1">
</form>
<button onclick="createData()">CREATE</button>
<script>
   function createData() {
      var i = document.createElement("INPUT");
      i.setAttribute("list", "fruits");
      document.getElementById("FORM1").appendChild(i);
      var y = document.createElement("DATALIST");
      y.setAttribute("id", "fruits");
      document.getElementById("FORM1").appendChild(y);
      var fruit1 = document.createElement("OPTION");
      fruit1.setAttribute("value", "mango");
      document.getElementById("fruits").appendChild(fruit1);
      var fruit2 = document.createElement("OPTION");
      fruit2.setAttribute("value", "papaya");
      document.getElementById("fruits").appendChild(fruit2);
   }
</script>
</body>
</html>

আউটপুট

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

তৈরি করবে

HTML DOM ডেটালিস্ট অবজেক্ট

CREATE বাটনে ক্লিক করার পর -

HTML DOM ডেটালিস্ট অবজেক্ট

উপরের উদাহরণে -

আমরা প্রথমে "FORM1" আইডি সহ একটি খালি ফর্ম তৈরি করেছি যেখানে আমরা ডেটালিস্ট অবজেক্ট ব্যবহার করে পরে একটি ডেটালিস্ট যুক্ত করব৷

<form id="FORM1"></form>

আমরা একটি ক্রিয়েট বোতাম তৈরি করেছি যা ব্যবহারকারীর দ্বারা ক্লিক করার পরে createData() ফাংশনটি কার্যকর করবে৷

<button onclick="createData()">CREATE</button>

createData() মেথডটি প্রথমে ডকুমেন্ট অবজেক্টের createElement() মেথড ব্যবহার করে একটি ইনপুট এলিমেন্ট তৈরি করে এবং এটি ভেরিয়েবল i এ বরাদ্দ করে। setAttribute() পদ্ধতি ব্যবহার করে আমরা লিস্ট অ্যাট্রিবিউট তৈরি করি এবং এটিকে ফলমূল নির্ধারণ করি। এই তালিকা বৈশিষ্ট্যটি গুরুত্বপূর্ণ কারণ এটি আমাদের ইনপুট বক্সকে আমাদের ডেটালিস্টের সাথে লিঙ্ক করে। তারপর appendChild() পদ্ধতি ব্যবহার করে ইনপুট বক্সটি আমাদের ফর্মে যুক্ত করা হয় এবং প্যারামিটার মান হিসাবে "FORM1" সরবরাহ করে৷

তারপরে আমরা উপাদানটি তৈরি করি এবং এর আইডিটিকে একই মান সেট করি যা আমরা ইনপুট বক্সে সরবরাহ করেছি যেমন “ফল”। আমরা তারপর createElement() পদ্ধতি ব্যবহার করে ডেটালিস্টের ভিতরে দুটি

function createData() {
   var i = document.createElement("INPUT");
   i.setAttribute("list", "fruits");
   document.getElementById("FORM1").appendChild(i);
   var y = document.createElement("DATALIST");
   y.setAttribute("id", "fruits");
   document.getElementById("FORM1").appendChild(y);
   var fruit1 = document.createElement("OPTION");
   fruit1.setAttribute("value", "mango");
   document.getElementById("fruits").appendChild(fruit1);
   var fruit2 = document.createElement("OPTION");
   fruit2.setAttribute("value", "papaya");
   document.getElementById("fruits").appendChild(fruit2);
}