HTML DOM डेटालिस्ट विकल्प संग्रह

<घंटा/>

HTML DOM Datalist विकल्प संग्रह का उपयोग HTML तत्व के अंदर मौजूद विकल्प मान संग्रह को सेट करने या वापस करने के लिए किया जाता है। तत्व उसी क्रम में दिखाई देते हैं जैसे वे दस्तावेज़ में हैं।

गुण

Datalist विकल्प संग्रह के लिए संपत्ति निम्नलिखित है -

<वें शैली ="चौड़ाई:88.9795%; पाठ-संरेखण:केंद्र;">विवरण

संपत्ति
लंबाई	संग्रह में <विकल्प> तत्वों की संख्या वापस करने के लिए। यह केवल पढ़ने के लिए संपत्ति है।

तरीके

Datalist विकल्प संग्रह के लिए निम्नलिखित तरीके हैं -

विधि	विवरण
[सूचकांक]	निर्दिष्ट अनुक्रमणिका पर मौजूद संग्रह से <विकल्प> तत्व को वापस करने के लिए। अनुक्रमण 0 से शुरू होता है और यदि अनुक्रमणिका संख्या सीमा से बाहर है तो शून्य वापस कर दिया जाता है।
आइटम (सूचकांक)	दिए गए अनुक्रमणिका के साथ संग्रह से <विकल्प> तत्व वापस करने के लिए। अनुक्रमण 0 से शुरू होता है और यदि यह सीमा से बाहर है तो शून्य वापस कर दिया जाता है।
namedItem(id)	दिए गए आईडी के साथ संग्रह से <विकल्प> तत्व वापस करने के लिए। यदि आईडी मौजूद नहीं है तो नल वापस कर दिया जाता है।

सिंटैक्स

Datalist विकल्प संग्रह के लिए वाक्य रचना निम्नलिखित है -

datalistObject.options

उदाहरण

आइए हम Datalist विकल्प संग्रह के लिए एक उदाहरण देखें -

<!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 () विधि का उपयोग करके डेटालिस्ट के विकल्प। लंबाई संपत्ति मान प्राप्त करती है और इसे चर fLength को असाइन करती है। विकल्प गणना मूल्य तब पैराग्राफ में "नमूना" आईडी के साथ अपनी आंतरिक HTML संपत्ति का उपयोग करके प्रदर्शित किया जाता है -

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