如何使用 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 标签内有多个选项。 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 - 另外，创建一个带有 id 的空 DOM 来显示输出。
步骤 3 - 让用户单击按钮元素并查看所选选项。
步骤 4 - 让用户从下拉列表中选择一个选项列表。
步骤 5 - 使用查询选择器获取选定的值并将其显示给用户。
示例
在此示例中，我们创建了一个带有几个选项的选择标签。有一个 DOM 用于显示输出，还有一个按钮元素供用户调用选项选择功能。当用户单击此按钮时，相应的 Dom 使用查询选择器和值选项在下拉列表中显示选定的值。
<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 的方法更有用，因为它直接获取值。
