jQuery 用于清除多选下拉框中所有选择的快速方法

在本文中，我们将介绍如何使用jQuery快速清除多选下拉框中的所有选项。多选下拉框是HTML表单中常见的组件之一，允许用户选择多个选项。然而，在某些情况下，我们可能需要在编程中清除所有已选择的选项，并将下拉框重置为默认状态。jQuery可以提供一个简单且快速的解决方案，让我们一起来看看吧！

阅读更多：jQuery 教程

问题描述

考虑一个多选下拉框的示例，HTML代码如下：

<select multiple id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

现在，假设用户已经选择了一些选项，并且我们想要通过编程方式将所有选项取消选择，让下拉框回到默认状态。

使用jQuery清除所选选项

为了使用jQuery清除多选下拉框中的所有选择，我们可以利用removeAttr()方法。这个方法用于删除被选元素的属性。我们可以结合prop()方法来移除选中的属性，示例如下：

$("#mySelect").find("option").prop("selected", false);

以上代码使用了find()方法来在多选下拉框中找到所有选项，然后使用prop()方法将其选中属性设置为false，即取消选择。这样，所有选项将被取消选择。

示例

下面是一个使用jQuery清除多选下拉框选择的完整示例：

<!DOCTYPE html>
<html>
<head>
  <title>Clear Selection - jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>Clear Selection</h1>

  <select multiple id="mySelect">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
  </select>

  <button id="clearBtn">Clear Selection</button>

  <script>
    (document).ready(function() {("#clearBtn").click(function() {
        $("#mySelect").find("option").prop("selected", false);
      });
    });
  </script>

</body>
</html>