使用 JS 获取选择值 - Javascript

在网页开发中，使用JS来获取选择值（也被称为选择器、下拉列表值等）很常见。本文将介绍使用JS来获取选择值的方法。

获取 select 元素的选择值

使用select元素时，我们通常希望能够获取用户选择的选项值。这里提供了两种方法。

方法一：通过 selectedIndex 属性来获取选择值

selectedIndex 属性返回表示当前选择项索引的数字（从0开始）。例如，选择第一个选项时，selectedIndex 返回值为0。

const selectElement = document.getElementById("mySelect");
const selectedIndex = selectElement.selectedIndex;
const selectedValue = selectElement.options[selectedIndex].value;

该代码将获取具有 id mySelect 的选择元素的选择索引，并使用该索引获取与该选择项相关联的 option 元素的值。

方法二：通过 value 属性来获取选择值

value 属性返回表示当前选择项值的字符串。例如，选择第一个选项时，value 返回值为选项的 value 属性值。

const selectElement = document.getElementById("mySelect");
const selectedValue = selectElement.value;

使用该代码将获取具有 id mySelect 的选择元素的当前值。

获取 radio 和 checkbox 元素的选择值

使用 radio 和 checkbox 元素时，我们需要获取用户选择的选项值。这里提供了两种方法。

方法一：循环遍历获取选择值

使用循环遍历 radio 和 checkbox 元素可以获取选中的元素的值。

const inputElements = document.getElementsByName("myRadioOrCheckbox");

let selectedValue = "";
for (let i = 0; i < inputElements.length; i++) {
  if (inputElements[i].checked) {
    selectedValue = inputElements[i].value;
    break;
  }
}

该代码将获取所有名称为 myRadioOrCheckbox 的输入元素，并使用循环遍历获取选中的元素的值。

方法二：使用 querySelector 方法来获取选择值

使用 querySelector 方法可以直接获取选择值。

const selectedValue = document.querySelector('input[name="myRadioOrCheckbox"]:checked').value;

querySelector 方法将返回与给定选择器匹配的文档中的第一个元素。

结论

使用JS来获取选择值是网页开发中非常常见的任务。使用本文介绍的方法可以轻松地获取选择器、下拉列表值等。