如何使用 JavaScript 在下拉列表中显示选定的选项？

在本教程中，我们将学习如何在 使用 JavaScript 的下拉列表中 显示选定的选项。

什么是下拉列表？下拉列表是一个可切换的菜单，允许用户从各种选项中选择一个项目。

下拉列表由 <select></select> 标签 生成，最常用于表单中收集用户输入。提交表单后，name 属性必须引用表单的数据。

DOM API 函数 getElementById() 和 querySelector() 可用于选择 <select> 元素。该过程使用 querySelector() 函数首先选择“按钮”和“选择”元素。然后，当单击按钮时，可以使用 JavaScript 显示选定的索引。将点击事件监听器附加到按钮。

现在让我们看看在下拉列表中显示选定选项的方法。

使用 Option 的 selectedIndex 属性

在本节中，我们将学习如何使用selectedIndex 属性获取下拉列表中的选定选项。selectedIndex 属性返回当前选定的下拉列表中元素的索引。如果未选择任何选项，则此索引（从 0 开始）将返回 -1。

options 属性收集选择下拉列表中的所有选项项并返回它们。页面源代码确定元素的顺序。要检索指定的元素，请使用此属性，以及之前找到的索引。此选项的 value 属性可用于确定其值。

语法

请按照以下语法使用 selectedIndex 属性。

selectelEment[selectElement.selectedIndex].value

这里，selectedIndex 是selectElement 的索引，而value 属性返回选定元素的值。

示例

在下面的示例中，我们有一个 表单标签。select 标签在form 标签内有多个选项。select 标签有一个onchange() 事件，当用户从下拉列表中选择一个选项时，该事件将执行一个函数。在此函数中，我们使用分配给每个标签的 name 属性在表单标签内选择 select 标签。

然后，从元素数组中获取这些元素的selectedIndex 并显示其值。此值显示在可用的空 DOM 的innerHTML 中。

<html>
<head>
   <title>Program to dispaly the selected options in a dropdown list</title>
</head>
<body>
   <h2>Using the <i>selectedIndex</i> property.</h2>
   <form name="dropForm">
      <select name="dropSelect" onchange="showDropInfo()">
         <option value="P">Select:</option>
         <option value="A">Option 1</option>
         <option value="B">Option 2</option>
         <option value="C">Option 3</option>
      </select>
   </form>
   <p id="pF"></p>
   <p id="pS"></p>
   <p id="pT"></p>
   <script>
      function showDropInfo() {
         var sT = dropForm.dropSelect;
         var pF = document.getElementById('pF');
         var pS = document.getElementById('pS');
         var pT = document.getElementById('pT');
         pF.innerHTML = ('Selected option index: ' + sT.selectedIndex);
         pS.innerHTML = ('Selected value: ' + sT[sT.selectedIndex].value);
         pT.innerHTML = ('Selected text: ' + sT[sT.selectedIndex].text);
      }
   </script>
</body>
</html>

使用 value 属性

在本节中，我们将学习如何使用value 属性获取下拉列表中的选定选项。可以选择指定列表的选定元素上的value 属性来确定选定元素的值。此属性返回一个字符串，对应于列表的“option”元素的 value 属性。如果未选择任何选项，则不会返回任何内容。

语法

selectElement.value

在上述语法中，selectElement.value 返回选项菜单中选定选项的文本值。

算法

  • 步骤 1 - 创建一个带有多个选项的 select 标签，并为 select 标签分配一个id。

  • 步骤 2 - 此外，创建一个带有 id 的空 DOM 以显示输出。

  • 步骤 3 - 让用户有一个按钮元素可以点击并查看所选的选项。

  • 步骤 4 - 让用户从下拉列表中选择一个选项。

  • 步骤 5 - 使用查询选择器获取选定的值并将其显示给用户。

示例

在此示例中，我们创建了一个带有几个选项的 select 标签。有一个 DOM 用于显示输出，还有一个按钮元素供用户调用选项选择函数。当用户单击此按钮时，相应的 DOM 使用查询选择器和 value 选项在下拉列表中显示选定的值。

<html>
<body>
   <h2>Using the <i>value</i> property</h2>
   <p>Select an option:
      <select id="s1">
         <option value="green">Green</option>
         <option value="blue">Blue</option>
         <option value="purple">Purple</option>
      </select>
   </p>
   <p>Selected option value :
      <span class="op"></span>
   </p>
   <button onclick="selOpt()">Option check</button>
   <script type="text/javascript">
      function selOpt() {
         selEl = document.querySelector('#s1');
         op = selEl.value;
         document.querySelector('.op').textContent = op;
      }
   </script>
</body>
</html>

在本教程中，我们学习了两种在下拉列表中显示选定选项的方法。

使用 selectedIndex 的方法稍微复杂一些，因为它从 options 数组中过滤值。使用 queryselector 或 document.getElementById 的方法更有用，因为它直接获取值。

更新于：2023年9月12日

31K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告