एचटीएमएल डोम विकल्प मूल्य संपत्ति

HTML DOM ऑप्शन वैल्यू प्रॉपर्टी लौटाती है और उस विकल्प के मान को संशोधित करती है जिसे सर्वर पर भेजा जा रहा है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

रिटर्निंग वैल्यू

object.value

लेबल संशोधित करना

object.value = “text”

उदाहरण

आइए हम HTML DOM ऑप्शन वैल्यू प्रॉपर्टी का एक उदाहरण देखें -

<!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.2rem;
   }
   .drop-down{
      width:35%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
   }
   .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;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Option value Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option value="Physics">Physics</option>
<option value="Maths">Maths</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
</select>
<button onclick="showValue()" class="btn">Show Value</button>
<div class="show"></div>
<script>
   function showValue() {
      var dropDown = document.querySelector(".drop-down");
      var msg = document.querySelector(".show").innerHTML="The selected value is: " + dropDown.options[dropDown.selectedIndex].value;
   }
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

एचटीएमएल डोम विकल्प मूल्य संपत्ति

ड्रॉप-डाउन सूची से अपना पसंदीदा विषय चुनें और फिर "मान दिखाएं . पर क्लिक करें “चयनित विकल्प के मूल्य विशेषता का मान प्रदर्शित करने के लिए बटन।

एचटीएमएल डोम विकल्प मूल्य संपत्ति