使用 jQuery 和 Select2 获取选中的值-js教程-PHP中文网

使用 jQuery 和 Select2 获取选中的值

DDD

发布： 2025-08-20 17:32:01

原创

294人浏览过

使用 jquery 和 select2 获取选中的值

摘要：本文介绍了如何使用 jQuery 和 Select2 插件获取多选下拉菜单中选中的值。通过简单的代码示例，演示了如何初始化 Select2 插件，并利用 .val() 方法获取选中的值数组，同时展示了如何监听 change 事件，在选项发生改变时动态获取选中的值。

Select2 是一个强大的 jQuery 插件，用于增强 HTML <select> 元素的功能，提供搜索、多选等高级特性。本文将详细介绍如何使用 jQuery 和 Select2 插件获取多选下拉菜单中选中的值。

初始化 Select2

首先，确保你已经正确引入了 jQuery 和 Select2 的相关文件（CSS 和 JavaScript）。然后，使用以下代码初始化 Select2：

$('#language').select2();

登录后复制

这段代码会将 id 为 language 的 <select> 元素转换为 Select2 插件增强的下拉菜单。

获取选中的值

要获取 Select2 下拉菜单中选中的值，可以使用 jQuery 的 .val() 方法。这个方法会返回一个包含所有选中值的数组。

var selectedValues = $('#language').val();
console.log(selectedValues);

登录后复制

这段代码会将选中的值存储在 selectedValues 变量中，并将其打印到控制台。

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

监听 change 事件

如果你需要在选项发生改变时动态获取选中的值，可以监听 Select2 的 change 事件。

$('#language').select2().on('change', function(e) {
  var selectedValues = $('#language').val();
  console.log(selectedValues);
});

登录后复制

这段代码会在用户选择或取消选择选项时触发 change 事件，并在事件处理函数中获取并打印当前选中的值。

完整示例

以下是一个完整的示例，展示了如何使用 jQuery 和 Select2 获取选中的值：

<!DOCTYPE html>
<html>
<head>
  <title>Select2 Example</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>

  <div class="container">
    <h2>Select2 Example</h2>
    <select id="language" class="form-control" multiple="multiple" data-toggle="select2">
      <option value="1">FR</option>
      <option value="2">Eng</option>
      <option value="3">Es</option>
    </select>
  </div>

  <script>
    $(document).ready(function() {
      $('#language').select2().on('change', function(e) {
        var selectedValues = $('#language').val();
        console.log(selectedValues);
      });
    });
  </script>

</body>
</html>

登录后复制

在这个示例中，我们首先引入了 jQuery、Bootstrap 和 Select2 的 CSS 和 JavaScript 文件。然后，我们创建了一个 id 为 language 的 <select> 元素，并使用 multiple="multiple" 属性使其支持多选。最后，我们在 JavaScript 代码中使用 $('#language').select2() 初始化 Select2，并监听 change 事件来获取选中的值。

注意事项

确保正确引入 jQuery 和 Select2 的相关文件。
<select> 元素必须具有 multiple="multiple" 属性才能支持多选。
.val() 方法返回的是一个字符串数组，即使只选择了一个选项。

总结

本文介绍了如何使用 jQuery 和 Select2 插件获取多选下拉菜单中选中的值。通过简单的代码示例，演示了如何初始化 Select2 插件，并利用 .val() 方法获取选中的值数组，同时展示了如何监听 change 事件，在选项发生改变时动态获取选中的值。希望本文能够帮助你更好地使用 Select2 插件。

以上就是使用 jQuery 和 Select2 获取选中的值的详细内容，更多请关注php中文网其它相关文章！