HTML DOM Select value Property - चयनित मान सेट/प्राप्त करें

HTML DOM Select value Property

HTML DOM select value property ड्रॉप-डाउन सूची के चयनित विकल्प के value attribute का मान प्राप्त या संशोधित करता है। यदि कोई विकल्प चयनित नहीं है, तो यह खाली string लौटाता है।

Syntax

मान प्राप्त करना:

selectObject.value

मान सेट करना:

selectObject.value = "text"

उदाहरण

चयनित विषय का value attribute मान प्रदर्शित करना:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.1rem; }
  .drop-down {
    width: 35%;
    border: 2px solid #fff;
    font-weight: bold;
    padding: 8px;
    outline: none;
  }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; color: #db133a; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM Select value 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="getValue()" class="btn">मान दिखाएं</button>
<div class="show"></div>
<script>
  function getValue() {
    var dropDown = document.querySelector(".drop-down");
    document.querySelector(".show").innerHTML = "मान = " + dropDown.value;
  }
</script>
</body>
</html>

आउटपुट

ड्रॉप-डाउन से विषय चुनें और "मान दिखाएं" बटन पर क्लिक करें। चयनित विकल्प का value attribute मान प्रदर्शित होगा। यदि विकल्प में value attribute नहीं है, तो विकल्प का टेक्स्ट कंटेंट मान के रूप में उपयोग किया जाता है।

मुख्य बिंदु

• value property चयनित विकल्प का value attribute लौटाता है
• यदि विकल्प में value attribute नहीं है, तो विकल्प का टेक्स्ट कंटेंट लौटाया जाता है
• value सेट करके प्रोग्रामेटिकली विकल्प चुन सकते हैं
• फॉर्म सबमिशन पर यही मान सर्वर भेजा जाता है
• selectedIndex property के साथ संयोजन में उपयोगी