HTML 在onchange事件中获取所有选中的值的方法

在本文中，我们将介绍如何在HTML的onchange事件中获取所有被选中的值。通常，当我们在HTML的select元素中使用multiple属性允许用户选择多个选项时，我们在用户选择选项时需要获取这些选项的值。

阅读更多：HTML 教程

使用JavaScript获取选中的值

我们可以使用JavaScript来获取所有被选中的值。首先，我们需要在HTML的select元素中添加一个onchange事件。例如：

<select id="mySelect" multiple onchange="getSelectedValues()">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

在上面的代码中，我们给select元素添加了一个id属性，值为”mySelect”；并且在onchange事件中调用了名为getSelectedValues()的JavaScript函数。

接下来，我们需要编写JavaScript代码来获取选中的值。通过使用document.getElementById()方法获取select元素的引用，并使用selectedOptions属性来获取所有被选中的选项。示例如下：

function getSelectedValues() {
  var selectElement = document.getElementById("mySelect");
  var selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);
  console.log(selectedValues);
}

在上面的代码中，我们首先使用document.getElementById()方法获取了id为”mySelect”的select元素的引用。然后，我们使用selectedOptions属性来获取所有被选中的选项，并将其转换成数组。最后，使用map()方法来获取每个选项的值，并将其存储在selectedValues变量中。在这个例子中，我们使用了ES6的箭头函数来简化代码。

最后，我们通过调用console.log()方法来打印选中的值。你也可以根据自己的需求将选中的值用于其他操作，例如将其发送到服务器或者更新页面上的其他元素。

示例

为了更好地理解如何使用以上方法，以下是一个完整的示例。在下面的示例中，我们创建了一个带有多选选项的select元素，并在页面底部显示已选中的值。

<select id="fruitsSelect" multiple onchange="getSelectedFruits()">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

<div id="selectedFruits"></div>

<script>
  function getSelectedFruits() {
    var selectElement = document.getElementById("fruitsSelect");
    var selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);
    document.getElementById("selectedFruits").innerText = "已选中的水果：" + selectedValues.join(", ");
  }
</script>