📌  相关文章
📜  如何使用 jQuery 在下拉列表中选择取消选择多个选项？(1)

📅  最后修改于: 2023-12-03 15:08:21.962000             🧑  作者: Mango

如何使用 jQuery 在下拉列表中选择取消选择多个选项？

在前端开发中，我们经常需要在下拉列表中选择或取消选择多个选项。使用 jQuery 可以轻松地实现这个功能。

实现步骤

  1. 给下拉列表加上 multiple 属性，使其具有多选的功能。

    <select multiple>
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

  2. 使用 jQuery 监听下拉列表的 change 事件，并获取被选中的选项。

    $('select').change(function() {
  var selectedOptions = $(this).find(':selected');
});

  3. 使用 each 方法遍历被选中的选项，获取其值或文本内容。

    var selectedOptions = $(this).find(':selected');
selectedOptions.each(function() {
  var value = $(this).val();
  var text = $(this).text();
});

  4. 获得所有选项的方法与上述类似。

    var allOptions = $(this).find('option');
allOptions.each(function() {
  var value = $(this).val();
  var text = $(this).text();
});

  5. 取消选择选项，可以使用 prop 方法将 selected 属性设置为 false。

    var deselectedOption = $('option[value="option1"]');
deselectedOption.prop('selected', false);
示例代码
<!DOCTYPE html>
<html>
  <head>
    <title>下拉列表多选示例</title>
  </head>
  <body>
    <select multiple>
      <option value="option1">选项 1</option>
      <option value="option2">选项 2</option>
      <option value="option3">选项 3</option>
    </select>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $('select').change(function() {
        var selectedOptions = $(this).find(':selected');
        selectedOptions.each(function() {
          var value = $(this).val();
          var text = $(this).text();
          console.log('选中的选项：', value, text);
        });

        var allOptions = $(this).find('option');
        allOptions.each(function() {
          var value = $(this).val();
          var text = $(this).text();
          console.log('所有选项：', value, text);
        });

        var deselectedOption = $('option[value="option1"]');
        deselectedOption.prop('selected', false);
      });
    </script>
  </body>
</html>
总结

使用 jQuery 实现下拉列表多选功能非常简单，只需要添加 multiple 属性，并监听 change 事件即可。在事件处理函数中，获取被选中的选项和所有选项的方法也很容易。取消选择选项可以使用 prop 方法将 selected 属性设置为 false。