jQuery option 多选选中

原创

mob64ca12f7ae31 2023-10-21 06:45:08 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f7ae31的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery option 多选选中

在Web开发中，我们经常需要使用下拉框（select）来提供用户选择的选项。有时候，我们需要支持多选功能。而使用jQuery，我们可以很方便地实现多选选中的功能。本文将介绍如何使用jQuery来实现多选选中，并提供代码示例。

理解 option 多选

在HTML中，通过使用<select>元素可以创建下拉框。<option>元素用于定义下拉框中的选项。当设置<select>元素的multiple属性为true时，表示允许多选。

<select multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

上述代码创建了一个支持多选的下拉框，其中包含了4个选项。

使用 jQuery 实现多选选中

使用jQuery，我们可以在页面加载完成后，通过选择器选择需要操作的元素，并使用相应的事件处理函数来实现多选选中的功能。

下面是一个示例代码，用于实现当用户选择了一个选项后，将其保存到一个数组中，并在控制台输出选中的值。

$(document).ready(function() {
  // 用于保存选中的值
  var selectedValues = [];

  // 当下拉框的选项改变时触发事件
  $("select").change(function() {
    // 清空之前保存的选中值
    selectedValues = [];

    // 遍历所有选中的选项
    $("option:selected").each(function() {
      // 将选中的值添加到数组中
      selectedValues.push($(this).val());
    });

    // 输出选中的值到控制台
    console.log(selectedValues);
  });
});

在上述代码中，我们首先创建了一个空数组selectedValues，用于保存选中的值。然后，通过选择器选择所有的<select>元素，并使用change()方法来绑定一个事件处理函数。当下拉框的选项改变时，事件处理函数会被触发。

事件处理函数首先会清空之前保存的选中值，然后通过$("option:selected")选择器选择所有选中的选项，并使用each()方法来遍历这些选项。在遍历过程中，将选中的值添加到数组selectedValues中。

最后，通过console.log(selectedValues)将选中的值输出到控制台。