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

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

如何使用jQuery在下拉菜单中选择/取消选择多个选项？

在开发Web应用时，下拉菜单是常用的用户输入控件之一。在某些情况下，需要让用户能够选择多个选项，因此我们需要使用多选下拉菜单。而jQuery提供了丰富的API来实现这一功能。

1. HTML结构

首先，我们需要在HTML中创建一个多选下拉菜单。可以通过<select>元素和<option>元素来实现。

<select id="my-select" multiple>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="pear">梨子</option>
  <option value="pineapple">菠萝</option>
</select>

注意，在<select>元素中添加了multiple属性，这是启用多选功能的关键。

2. jQuery代码
2.1 获取选中选项的值

使用jQuery来获取选中的选项很简单，只需要使用val()方法即可。此方法将返回一个数组，每个元素对应一个选中的选项的值。

var selectedValues = $('#my-select').val();
2.2 设置选中选项的值

如果要设置选中某些选项，可以使用val()方法传递一个字符串数组来设置选中的值。

$('#my-select').val(['apple', 'orange']);
2.3 取消选中选项的值

如果要取消选中某些选项，可以使用val()方法传递一个空数组来取消选中的值。

$('#my-select').val([]);
3. 完整代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多选下拉菜单</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
  $(function() {
    // 获取选中选项的值
    var selectedValues = $('#my-select').val();
    console.log(selectedValues);
    
    // 设置选中选项的值
    $('#my-select').val(['apple', 'orange']);
    
    // 取消选中选项的值
    $('#my-select').val([]);
  });
  </script>
</head>
<body>

  <select id="my-select" multiple>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
    <option value="pear">梨子</option>
    <option value="pineapple">菠萝</option>
  </select>

</body>
</html>

以上就是使用jQuery在多选下拉菜单中选择/取消选择多个选项的方法。