JS 获取选项值 - JavaScript

JavaScript 是一种很强大的编程语言，可以在网页中处理各种交互和动态效果。而其中一个常见的需求就是获取用户在表单中选择的选项的值。在本文中，我们将介绍如何使用 JavaScript 来获取选项值。

HTML 表单

首先，我们需要了解 HTML 表单。表单是用于收集用户输入信息的一组元素，通常包括文本框、下拉框、单选框、复选框等。下面是一个简单的表单示例：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select><br>

  <label for="hobby">Hobby:</label><br>
  <input type="checkbox" id="reading" name="hobby" value="reading">
  <label for="reading">Reading</label><br>

  <input type="submit" value="Submit">
</form>

在上面的示例中，我们定义了一个包含文本框、下拉框和复选框的表单，并用相应的 id 和 name 属性给它们命名，方便通过 JavaScript 获取其值。

获取选项值

要获取选项值，我们需要使用 DOM（文档对象模型）来操作 HTML 元素。下面是一些常见的方法：

1、通过 getElementById 方法获取元素

getElementById 方法可以通过元素的 id 属性获取元素：

const gender = document.getElementById("gender");
const selectedGender = gender.value;

上面的代码中，我们通过 getElementById 方法获取了 id 为 gender 的下拉框元素，并通过 value 属性获取其选中的选项值。

2、通过 getElementsByName 方法获取元素（适用于单选框和复选框）

getElementsByName 方法可以通过元素的 name 属性获取元素，通常用于单选框和复选框：

const hobbies = document.getElementsByName("hobby");
const selectedHobbies = [];
for (let i = 0; i < hobbies.length; i++) {
  if (hobbies[i].checked) {
    selectedHobbies.push(hobbies[i].value);
  }
}

上面的代码中，我们通过 getElementsByName 方法获取了所有 name 属性为 hobby 的复选框元素，然后循环遍历这些元素，检查哪些元素被选中了，并将其选项值存储在一个数组中。

3、通过 querySelector 或 querySelectorAll 方法获取元素

querySelector 方法可以通过 CSS 选择器获取元素，而 querySelectorAll 方法可以获取匹配选择器的所有元素。下面是一些示例：

// 获取 name 属性为 "name" 的文本框元素
const name = document.querySelector('input[name="name"]');

// 获取下拉框元素中选中的选项文本
const selectedGenderText = document.querySelector('#gender option:checked').text;

// 获取所有 name 属性为 "hobby" 的复选框元素
const hobbies = document.querySelectorAll('input[name="hobby"]');

总结

通过上述方法，我们可以轻松地获取 HTML 表单中用户选择的选项值，从而进行各种操作，比如提交至服务器或进行数据校验等。JavaScript 还有很多其他 DOM 操作，建议学习者多多实践，掌握其使用方法。