HTML DOM Select selectedIndex Property - चयनित इंडेक्स सेट/प्राप्त करें

HTML DOM Select selectedIndex Property

HTML DOM select selectedIndex property ड्रॉप-डाउन सूची में चयनित विकल्प का इंडेक्स प्राप्त या संशोधित करती है। इंडेक्स 0 से शुरू होता है। यदि कोई विकल्प चयनित नहीं है, तो यह -1 लौटाता है।

Syntax

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

selectObject.selectedIndex

चयनित इंडेक्स सेट करना:

selectObject.selectedIndex = "number"

उदाहरण

ड्रॉप-डाउन में चौथा विकल्प (इंडेक्स 3) प्रोग्रामेटिकली चुनना:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: radial-gradient(circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90%) no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.1rem; }
  .drop-down {
    display: block;
    width: 35%;
    border: 2px solid #fff;
    font-weight: bold;
    padding: 2px;
    margin: 1rem auto;
    outline: none;
  }
  .btn {
    background: orange;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    font-weight: bold;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM Select selectedIndex property Demo</h1>
<p>नमस्ते, अपना पसंदीदा विषय चुनें:</p>
<select class='drop-down' name="Drop Down List">
  <option>Physics</option>
  <option>Maths</option>
  <option>Chemistry</option>
  <option>English</option>
  <option>Economics</option>
  <option>Hindi</option>
  <option>Biology</option>
</select>
<button type="button" onclick="set()" class="btn">selectedIndex सेट करें</button>
<div class="show"></div>
<script>
  function set() {
    var dropDown = document.querySelector(".drop-down");
    document.querySelector(".show").innerHTML = "selectedIndex = '3' सेट किया गया";
    dropDown.selectedIndex = "3";
  }
</script>
</body>
</html>

आउटपुट

"selectedIndex सेट करें" बटन पर क्लिक करने पर ड्रॉप-डाउन में चौथा विकल्प (English, इंडेक्स 3) स्वचालित रूप से चुन लिया जाता है।

मुख्य बिंदु

• selectedIndex 0-आधारित इंडेक्स है (पहला विकल्प = 0)
• कोई विकल्प चयनित न होने पर -1 लौटाता है
• selectedIndex सेट करके प्रोग्रामेटिकली विकल्प चुन सकते हैं
• value property के साथ संयोजन में उपयोगी - value मान से चयन, selectedIndex स्थिति से चयन
• बहु-चयन (multiple) ड्रॉप-डाउन में केवल पहला चयनित विकल्प का इंडेक्स लौटाता है