JavaScript 从选择中获取所有选项

在开发 Web 应用程序时，有时需要从 HTML 表单元素中获取选项的列表。在 JavaScript 中，可以通过访问 select 元素的 options 属性来获取选项列表。本文将介绍如何使用 JavaScript 从选择中获取所有选项。

使用 options 属性获取所有选项

在 JavaScript 中，select 元素的 options 属性返回一个 Option 对象数组，其中包含选择元素中的每个选项。可以使用此数组遍历所有选项并执行所需的操作。

var selectElement = document.getElementById("mySelect");
var optionList = selectElement.options;

for (var i = 0; i < optionList.length; i++) {
  var option = optionList[i];
  console.log("选项 #" + i + ": " + option.value);
}

在此示例中，我们首先获取 ID 为 "mySelect" 的 select 元素。然后，我们使用 options 属性获取选项列表。接下来，我们使用 for 循环遍历列表并记录每个选项的值。

从选择中获取所选选项

除了获取所有选项外，您可能希望获取当前选择的选项。在 JavaScript 中，select 元素的 selectedIndex 属性返回当前选定选项的索引。

var selectElement = document.getElementById("mySelect");
var selectedOption = selectElement.options[selectElement.selectedIndex];
console.log("当前选择的选项: " + selectedOption.value);

在此示例中，我们获取 ID 为 "mySelect" 的 select 元素。然后，我们使用 selectedIndex 属性获取当前选定选项的索引，并将其用作 options 数组中的索引。最后，我们记录所选选项的值。

结论

使用 JavaScript 从选择中获取所有选项是一项常见的任务，特别是在处理 Web 表单时。通过访问 select 元素的 options 属性，可以轻松地遍历所有选项并执行所需的操作。此外，您还可以使用 selectedIndex 属性获取当前选择的选项。