HTML DOM Option index Property - विकल्प इंडेक्स सेट/प्राप्त करें

HTML DOM Option index Property

HTML DOM option index property ड्रॉप-डाउन सूची में किसी विकल्प (<option>) की इंडेक्स स्थिति प्राप्त या संशोधित करती है। इंडेक्स 0 से शुरू होता है।

Syntax

इंडेक्स प्राप्त करना:

optionObject.index

इंडेक्स सेट करना:

optionObject.index = "number"

उदाहरण

चयनित विकल्प का इंडेक्स प्रदर्शित करना:

<!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>नमस्ते, अपना पसंदीदा विषय चुनें:</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">इंडेक्स दिखाएं</button>
<div class="show"></div>
<script>
  function showIndex() {
    var dropDown = document.querySelector(".drop-down");
    var showMsg = document.querySelector(".show");
    showMsg.innerHTML = "चयनित विकल्प का इंडेक्स है: " + dropDown.options[dropDown.selectedIndex].index;
  }
</script>
</body>
</html>

आउटपुट

ड्रॉप-डाउन से कोई विकल्प चुनें और "इंडेक्स दिखाएं" बटन पर क्लिक करें। चयनित विकल्प का इंडेक्स (0-आधारित) प्रदर्शित होगा।

मुख्य बिंदु

• index property विकल्प की ड्रॉप-डाउन में स्थिति दर्शाता है (0 से शुरू)
• यह selectedIndex property के समान है लेकिन विकल्प ऑब्जेक्ट पर उपलब्ध है
• इंडेक्स सेट करने से विकल्प की स्थिति बदल जाती है (ड्रॉप-डाउन में पुनर्क्रमित होता है)
• dropDown.options[index] से विशिष्ट विकल्प तक पहुंच सकते हैं
• डायनामिक विकल्प क्रमबद्दीकरण के लिए उपयोगी