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

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

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

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

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

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

使用选项的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+ 浏览量

启动您的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.