- 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 index Property
The HTML DOM option index property returns and modify the index position of an option in the HTML document.
Syntax
Following is the syntax −
Returning index
object.index
Modifying index
object.index = “number”
Example
Let us see an example of HTML option index 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 index Demo</h1> <p>i, Select your favourite subject:</p> <select class='drop-down' name="Drop Down List"> <option>Physics</option> <option>Maths</option> <option>Chemistry</option> <option>English</option> </select> <button onclick="showIndex()" class="btn">Show Index</button> <div class="show"></div> <script> function showIndex() { var dropDown=document.querySelector(".drop-down"); var showMsg=document.querySelector(".show"); showMsg.innerHTML="Selected option index is: "+dropDown.options[dropDown.selectedIndex].index; } </script> </body> </html>
Output
This will produce the following output −
Click on “Show Index” button to show the index of selected option.
Advertisements