Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML DOM Select type Property - ड्रॉप-डाउन प्रकार प्राप्त करें

HTML DOM Select type Property

HTML DOM Select type property HTML दस्तावेज़ में ड्रॉप-डाउन सूची के type attribute का मान लौटाता है। यह property केवल पढ़ने के लिए है (read-only) और ड्रॉप-डाउन के प्रकार को दर्शाता है।

Syntax

selectObject.type

उदाहरण

ड्रॉप-डाउन के type attribute का मान प्रदर्शित करना:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: radial-gradient(circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90%) no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.1rem; }
  .drop-down {
    display: block;
    width: 35%;
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    font-weight: bold;
    padding: 8px;
    margin: 1rem auto;
  }
  .btn {
    background: orange;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    font-weight: bold;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM Select type property Demo</h1>
<p>नमस्ते, अपना पसंदीदा विषय चुनें:</p>
<select class='drop-down' name="Drop Down List">
  <option>Physics</option>
  <option>Maths</option>
  <option>Chemistry</option>
  <option>English</option>
</select>
<button type="button" onclick="getType()" class="btn">प्रकार दिखाएं</button>
<div class="show"></div>
<script>
  function getType() {
    var dropDown = document.querySelector(".drop-down");
    document.querySelector(".show").innerHTML = "type = " + dropDown.type;
  }
</script>
</body>
</html>

आउटपुट

"प्रकार दिखाएं" बटन पर क्लिक करने पर ड्रॉप-डाउन का प्रकार प्रदर्शित होता है। चूंकि यह एकल-चयन ड्रॉप-डाउन है, इसलिए यह "select-one" लौटाएगा। यदि multiple attribute होता तो "select-multiple" लौटाता।

मुख्य बिंदु

  • type property केवल पढ़ने के लिए है (read-only)
  • एकल-चयन ड्रॉप-डाउन के लिए "select-one" लौटाता है
  • बहु-चयन ड्रॉप-डाउन (multiple attribute के साथ) के लिए "select-multiple" लौटाता है
  • यह फॉर्म एलिमेंट के प्रकार की पहचान के लिए उपयोगी है
  • JavaScript में फॉर्म एलिमेंट्स को प्रकार के आधार पर फ़िल्टर करने के लिए उपयोग कर सकते हैं
  1. HTML DOM Fieldset type प्रॉपर्टी HTML DOM Fieldset type प्रॉपर्टी

    HTML DOM Fieldset type प्रॉपर्टी का उपयोग fieldset तत्व के प्रकार को लौटाने के लिए किया जाता है। यह फील्डसेट तत्व के लिए हमेशा fieldset प्रकार का होगा। यह एक रीड-ओनली प्रॉपर्टी है। सिंटैक्स Fieldset type प्रॉपर्टी के लिए सिंटैक्स: fieldsetObject.type उदाहरण आइए Fieldset type प्रॉपर्टी का एक उदाहरण

  1. HTML DOM Ol type प्रॉपर्टी HTML DOM Ol type प्रॉपर्टी

    HTML DOM Ol type प्रॉपर्टी ऑर्डर्ड लिस्ट में उपयोग किए जाने वाले मार्कर के प्रकार को दर्शाने वाले type एट्रिब्यूट के मान को सेट या लौटाती है। सिंटैक्स olObject.type मान सेट करना olObject.type = 1|a|A|i|I उदाहरण <!DOCTYPE html> <html> <head> <title>HTML DOM Ol type</title&

  1. HTML DOM Event type प्रॉपर्टी HTML DOM Event type प्रॉपर्टी

    HTML DOM Event type प्रॉपर्टी इवेंट के प्रकार जैसे click, keypress, load, या touchend को दर्शाने वाला स्ट्रिंग लौटाती है। सिंटैक्स event.type उदाहरण <!DOCTYPE html> <html> <head> <title>HTML DOM Event type</title> <style>    form {