Teach with us

HTML DOM Option value Property

The HTML DOM option value property returns and modify the value of an option which is going to be sent over the server.

Syntax

Following is the syntax −

  • Returning value

object.value

  • Modifying label

object.value = “text”

Example

Let us see an example of HTML DOM option value property −

 Live Demo

<!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>

Output

This will produce the following output −

Select your favourite subject from the drop-down list and then click on “Show Value” button to display the value of the value attribute of the selected option.

Updated on 01-Jul-2020 10:04:22

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements