HTML DOM सेलेक्ट ऑब्जेक्ट एक HTML दस्तावेज़ के
आइए देखें कि चुनिंदा वस्तु कैसे बनाई जाती है
सिंटैक्स
निम्नलिखित वाक्य रचना है -
document.createElement(“SELECT”);
गुण
चुनिंदा वस्तु के गुण निम्नलिखित हैं -
| संपत्ति | स्पष्टीकरण |
|---|---|
| ऑटोफोकस | यह लौटाता है और संशोधित करता है कि पृष्ठ लोड होने पर ड्रॉप-डाउन सूची पर ध्यान केंद्रित किया जाना चाहिए या नहीं। |
| अक्षम | यह लौटाता है और संशोधित करता है कि ड्रॉप-डाउन सूची अक्षम है या नहीं। |
| लंबाई | यह एक HTML दस्तावेज़ में ड्रॉप-डाउन सूची के अंदर <विकल्प> तत्वों की संख्या देता है। |
| फ़ॉर्म | यह उस प्रपत्र का संदर्भ देता है जिसमें HTML दस्तावेज़ में ड्रॉप-डाउन सूची होती है। |
| एकाधिक | यह लौटाता है और संशोधित करता है कि ड्रॉप-डाउन सूची से एकाधिक विकल्पों का चयन किया जा सकता है या नहीं। |
| नाम | यह ड्रॉप-डाउन सूची के नाम विशेषता के मान को लौटाता है और बदल देता है। |
| आकार | यह ड्रॉप-डाउन सूची के आकार विशेषता के मान को लौटाता है और बदल देता है। |
| टाइप करें | यह ड्रॉप-डाउन सूची के प्रकार विशेषता का मान देता है। |
| मान | यह ड्रॉप-डाउन सूची की value विशेषता की सामग्री को लौटाता है और संशोधित करता है। |
| चयनित अनुक्रमणिका | यह एक HTML दस्तावेज़ में ड्रॉप-डाउन सूची के चयनित विकल्प की अनुक्रमणिका को लौटाता है और संशोधित करता है। |
तरीके
निम्नलिखित तरीके हैं -
| विधि | स्पष्टीकरण |
|---|---|
| जोड़ें () | यह HTML दस्तावेज़ में ड्रॉप-डाउन सूची में एक नया विकल्प जोड़ता है। |
| निकालें () | यह HTML दस्तावेज़ में ड्रॉप-डाउन सूची से एक नया विकल्प हटाता है। |
| चेकवैलिडिटी () | यह HTML दस्तावेज़ में ड्रॉप-डाउन सूची की वैधता की जांच करता है। |
उदाहरण
आइए HTML DOM सेलेक्ट ऑब्जेक्ट का एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#fff;
color:#0197F6;
}
h1{
color:#23CE6B;
}
.btn{
background-color:#fff;
border:1.5px dashed #0197F6;
height:2rem;
border-radius:2px;
width:60%;
margin:2rem auto;
display:block;
color:#0197F6;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM select Object Demo</h1>
<button onclick="createDropDownList()" class="btn">Create a drop-down list</button>
<script>
function createDropDownList() {
var dropDown = document.createElement("SELECT");
dropDown.innerHTML="<option>CAKE</option><option>PIZZA<option><option>BURGER</option>";
document.body.appendChild(dropDown);
}
</script>
</body>
</html> यह निम्नलिखित आउटपुट देगा -
“एक ड्रॉप-डाउन सूची बनाएं . पर क्लिक करें ड्रॉप-डाउन सूची बनाने के लिए ड्रॉप-डाउन सूची बनाएं” बटन।
