![Trending Articles on Technical and Non Technical topics](/images/trending_categories.jpeg)
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
<!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.
Advertisements