HTML DOM Datalist options कलेक्शन

HTML DOM Datalist options कलेक्शन का उपयोग HTML <datalist> एलिमेंट के अंदर मौजूद ऑप्शन वैल्यू कलेक्शन को सेट या वापस करने के लिए किया जाता है। एलिमेंट्स उसी क्रम में दिखाई देते हैं जैसे वे डॉक्यूमेंट में हैं।

प्रॉपर्टीज (Properties)

Datalist options कलेक्शन के लिए प्रॉपर्टी:

प्रॉपर्टी	विवरण
length	कलेक्शन में `<option>` एलिमेंट्स की संख्या वापस करने के लिए। यह एक रीड-ओनली प्रॉपर्टी है।

मेथड्स (Methods)

Datalist options कलेक्शन के लिए मेथड्स:

मेथड	विवरण
[index]	निर्दिष्ट इंडेक्स पर मौजूद `<option>` एलिमेंट को कलेक्शन से वापस करने के लिए। इंडेक्सिंग 0 से शुरू होती है और यदि इंडेक्स नंबर आउट ऑफ रेंज है तो null वापस किया जाता है।
item(index)	दिए गए इंडेक्स वाले `<option>` एलिमेंट को कलेक्शन से वापस करने के लिए। इंडेक्सिंग 0 से शुरू होती है और यदि आउट ऑफ रेंज है तो null वापस किया जाता है।
namedItem(id)	दिए गए आईडी वाले `<option>` एलिमेंट को कलेक्शन से वापस करने के लिए। यदि आईडी मौजूद नहीं है तो null वापस किया जाता है।

सिंटैक्स (Syntax)

Datalist options कलेक्शन का सिंटैक्स:

datalistObject.options

उदाहरण (Example)

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>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

HTML DOM Datalist options कलेक्शन

COUNT बटन पर क्लिक करने पर (आप डेटालिस्ट पर क्लिक करके खुद एलिमेंट्स गिन सकते हैं):

HTML DOM Datalist options कलेक्शन

हमने "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"; }