如何使用 jQuery 从选择标签中获取值 - JavaScript

在 JavaScript 中，你可以使用 jQuery 库来操作 DOM 元素。当你需要从选择标签中获取值时，jQuery 提供非常便捷的 API 让你可以轻松地完成这个任务。

使用 $() 函数来选择 HTML 元素，然后使用 .val() 方法来获取该元素的值。

代码演示

// HTML 代码如下
// <input type="text" id="username" value="John Doe">

// 使用 jQuery 获取文本框的值
var username = $('#username').val();

// 输出获取到的值
console.log(username);  // John Doe

这个代码片段展示了如何使用 jQuery 选择 ID 为 username 的文本框，并且获取它的值。

如果元素有多个值

如果标签有多个值（例如多选框或下拉框），那么可以使用 .map() 方法来循环所有已被选中的选项，并且将它们的值存储到一个数组中。

// HTML 代码如下
// <select id="colors" multiple>
//   <option value="red" selected>Red</option>
//   <option value="green">Green</option>
//   <option value="blue" selected>Blue</option>
// </select>

// 使用 jQuery 获取多选框的值
var colors = $('#colors option:selected').map(function() {
  return $(this).val();
}).get();

// 输出获取到的值
console.log(colors);  // ['red', 'blue']

这个代码段展示了如何使用 jQuery 获取多选框的值，它将获取多选框中所有被选中的选项，并且将它们的值存储到数组中。

总结

无论你是需要获取单个值还是多个值，使用 jQuery 都可以轻松地完成这个任务。使用 $() 函数选择 HTML 元素，然后使用 .val() 方法来获取它的值。对于多选框和下拉框，可以使用 .map() 方法将选项的值存储到一个数组中。