如何使用 JavaScript 显示下拉列表中所选选项的索引？

我们在 JavaScript 中使用selectedIndex 属性来显示下拉列表中所选选项的索引。我们使用下拉列表的 id 通过 JavaScript 访问该元素，然后在其上调用 selectedIndex 以获取下拉列表中所选选项的索引。

下拉列表是用户界面实用程序的重要组成部分。它是一个选项列表，用户可以从中选择一个或多个选项。然后收集对这些下拉列表的响应，并由用户采取所需的行动。

下拉列表通常用于用户有多个选项且需要选择其中一个或多个的情况。

使用selectedIndex 属性

它是JavaScript 文档对象模型中下拉列表的一个属性。它包含 HTML 文档中下拉列表中所选选项的索引。

索引从 0 开始。

语法

var index = document.getElementById("dropDownListId").selectedIndex;

我们首先使用其 Id“dropDownListId”引用下拉列表，并在变量 index 中提取所选选项的索引。

让我们来看一个例子以便更好地理解。

示例 1

在下面的代码片段中，我们有一个用于在表单中选择 Windows 版本的下拉列表。用户选择所需的选项，然后单击提交按钮。然后，我们在 HTML 主体中显示所选选项的索引。

<!DOCTYPE html>
<html>
<body>
   <p> Which windows version do you use ? </p><br>
   <form id="myForm"> 
      <select id="selectNow">
         <option>Windows 11</option>
         <option>Windows 10</option>
         <option>Windows 8</option>
         <option>Windows 7</option>
         <option>Windows vista</option>
         <option>Windows XP</option>
         <option>Windows 2000</option>
         <option>Windows 98</option>
      </select> 
      <input type="button" onclick="display()" value="Submit !"> 
   </form>
   <p>Select and click the button to get the index of the selected option.<br></p>
   <div id="result"></div>
   <script>
      function display() {
         var index = document.getElementById("selectNow").selectedIndex;
         document.getElementById("result").innerHTML = "The selected index is :" + index;
      }
   </script>
</body>
</html>

提交按钮触发 display() 函数，该函数提取所选选项的索引并在 HTML 主体中打印索引。

不仅可以提取索引，还可以使用value 属性提取所选选项的值。

var value = document.getElementById("dropDownListId").value;

我们首先使用其 Id 引用下拉列表，并在变量 index 中提取所选选项的索引。

让我们来看一个例子以便更好地理解。

示例 2

在下面的代码片段中，我们将创建一个按钮，该按钮首先提取 HTML 文档中存在的所有链接的列表，然后迭代该列表以在 HTML 主体中记录每个超链接。

<!DOCTYPE html>
<html>
<body>
   <p> Which windows version do you use ? </p><br>
   <form id="myForm"> 
      <select id="selectNow">
         <option>Windows 11</option>
         <option>Windows 10</option>
         <option>Windows 8</option>
         <option>Windows 7</option>
         <option>Windows vista</option>
         <option>Windows XP</option>
         <option>Windows 2000</option>
         <option>Windows 98</option>
         </select> 
      <input type="button" onclick="display()" value="Submit !"> 
   </form>
   <p>Select and click the button to get the index of the selected option.<br></p>
   <div id="result"></div>
   <script>
      function display() {
         var index = document.getElementById("selectNow");
         var resultDiv = document.getElementById("result");
         var text = "";
         text += "The selected option is :" + index.value;
         resultDiv.innerHTML = text;
      }
   </script>
</body>
</html>

提交按钮触发 display() 函数，该函数提取所选选项的值并在 HTML 主体中记录它。

注意 - 如果没有选择任何选项，则索引将返回 -1。

注意 -

但是，JavaScript 的 selectedIndex 功能有一些限制。

在多选下拉列表中，selectedIndex 只返回所选选项的第一个索引，因此我们对此有一个解决方法。

对于允许进行多项选择的下拉列表，我们在相应下拉列表 JavaScript 对象的options 属性上使用 for ... of 循环。对于每个选项，我们检查其selected 属性是否为 true。

让我们用一个例子来更好地理解这一点 -

示例 3

在下面的代码片段中，我们有一个多选下拉列表，我们将创建一个按钮，该按钮首先提取下拉列表中所有选项的列表，然后迭代它们以检查哪个选项被选中。

<!DOCTYPE html>
<html>
<body>
   <p> Which windows versions do you use? </p>
   <p> You can select multiple options. </p>
   <form id="myForm">
      <select id="selectNow" multiple>
         <option>Windows 11</option>
         <option>Windows 10</option>
         <option>Windows 8</option>
         <option>Windows 7</option>
         <option>Windows vista</option>
         <option>Windows XP</option>
         <option>Windows 2000</option>
         <option>Windows 98</option>
      </select>
      <input type = "button" onclick = "display()" value = "Submit">
   </form>
   <p>The selected options are : <div id = "result"> </div></p>
   <script>
      function display(){
         var options = document.getElementById("selectNow").options;
         var text = "";
         for(option of options){
            if(option.selected) text += option.value + "<br>";
         }
         document.getElementById("result").innerHTML = text;
      }
   </script>
</body>
</html>

提交按钮触发display() javascript 函数，该函数提取下拉列表中的所有选项并在 HTML 主体中记录它。

结论

文档对象的selectedIndex 属性对于接收用户输入并提供合适的响应非常有帮助。

更新于: 2022年9月21日

11K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告