在多选 jQuery 中获取选定的值 - JavaScript

在一些网页应用程序中，我们需要从多个选项中获取选定的值。使用 jQuery 可以轻松解决这个问题。在本文中，我们将介绍如何获取多选下拉列表和复选框中的选定值。

获取多选下拉列表的选定值

首先，我们可以使用 jQuery 的 val() 方法获取多选下拉列表中的选定值。代码示例如下：

// HTML 代码
<select id="fruits" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

// JavaScript 代码
var selectedValues = $('#fruits').val();
console.log(selectedValues); // 输出选定的值

在以上代码片段中，#fruits 是多选下拉列表的 ID。val() 方法将返回一个数组，包含选定的值。如果没有选定任何值，则返回 null。

获取复选框的选定值

接下来，我们可以使用 jQuery 的 each() 方法获取复选框中的选定值。代码示例如下：

// HTML 代码
<input type="checkbox" name="fruits" value="apple"> Apple
<input type="checkbox" name="fruits" value="banana"> Banana
<input type="checkbox" name="fruits" value="orange"> Orange

// JavaScript 代码
var selectedValues = [];
$('input[name="fruits"]:checked').each(function() {
  selectedValues.push($(this).val());
});
console.log(selectedValues); // 输出选定的值

在以上代码片段中，input[name="fruits"] 是复选框的选择器。checked 属性将只选择选定的复选框，并且 each() 方法将循环遍历每个选定的复选框。在循环体中，$(this) 将返回当前循环到的复选框对象，val() 方法将返回该对象的值。选定的值将按顺序添加到 selectedValues 数组中。

通过以上方法，我们可以轻松地从多个选项中获取选定的值。