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

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

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

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

DOM API的函数 getElementById() 和 _ querySelector() _ 可以用于选择一个 <select>元素。该过程使用 _ querySelector() _ 函数首先选择“button”和“select”元素。然后可以在按钮被点击时使用JavaScript显示所选索引。将点击事件侦听器附加到按钮上。

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

使用Option的selectedIndex属性

在本节中，我们将学习如何使用 **selectedIndex ** 属性来获取下拉列表中的选定选项。被选中的元素在下拉列表中的索引由 **selectedIndex ** 属性返回。如果没有选定任何选项，则该索引从0开始，为-1。

选取下拉列表中的所有选项项的选项属性将返回它们。页面的源代码决定元素的顺序。使用该属性和先前找到的索引来检索指定的元素。此选项的value属性可用于确定其值。

语法

按照下面的语法使用selectedIndex属性。

selectelEment[selectElement.selectedIndex].value

这里， selectedIndex 是 selectElement 的索引，并且 value 属性返回所选元素的值。

示例

在下面的示例中，我们有一个 form 标签。在 form 标签内部有一个带有多个选项的 select 标签。 select 标签具有一个 onchange() 事件，当用户从下拉列表中选择一个选项时，将执行一个函数。在这个函数中，我们使用分配给每个标签的 name 属性选择 form 标签中的 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 - 同样，创建一个空的DOM并为其分配一个id，用于显示输出。
步骤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的方法稍微复杂，因为它从选项数组中过滤值。而使用queryselector或document.getElementById的方法更加实用，因为它可以直接获取值。