当前位置：首页 > 文章列表 > 文章 > 前端 > jQuerySelect2获取选中值技巧

jQuerySelect2获取选中值技巧

2025-08-27 09:45:34 0浏览收藏

一分耕耘，一分收获！既然都打开这篇《jQuery + Select2 获取选中值方法》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

使用 jQuery 和 Select2 获取选中值

本文旨在提供一个清晰简洁的指南，介绍如何使用 jQuery 和 Select2 插件来获取多选下拉列表中用户选中的值。我们将通过示例代码演示如何初始化 Select2 插件，并监听 change 事件来获取选中的值数组，以便在你的 Web 应用中使用。

初始化 Select2

首先，确保你已经正确引入了 jQuery 和 Select2 的相关文件（CSS 和 JavaScript）。通常，你需要引入 jQuery、Bootstrap (可选，用于样式) 和 Select2 的 CSS 和 JS 文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

接下来，在你的 HTML 中创建一个 select 元素，并设置 multiple 属性，使其支持多选。

&lt;select id=&quot;language&quot; class=&quot;form-control&quot; multiple=&quot;multiple&quot; data-toggle=&quot;select2&quot;&gt;
  <option value="1">FR</option>
  <option value="2">Eng</option>
  <option value="3">Es</option>
&lt;/select&gt;

然后，使用 jQuery 初始化 Select2 插件：

$(document).ready(function() {
  $('#language').select2();
});

获取选中的值

要获取选中的值，你可以使用 $('#language').val() 方法。这个方法会返回一个包含所有选中选项值的数组。为了在用户选择发生变化时实时获取选中的值，可以监听 Select2 的 change 事件。

$(document).ready(function() {
  $('#language').select2().on('change', function(e) {
    var selectedValues = $('#language').val();
    console.log(selectedValues); // 输出选中的值数组
  });
});

代码解释：

$('#language').select2(): 初始化 Select2 插件。
.on('change', function(e) { ... }): 监听 change 事件，当选择发生变化时触发。
$('#language').val(): 获取当前选中的所有选项的值，返回一个数组。
console.log(selectedValues): 将选中的值数组输出到控制台，方便调试。

完整示例

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

<!DOCTYPE html>
<html>
<head>
  <title>Select2 Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <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://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>Select2 Multiple Select Example</h1>
    &lt;select id=&quot;language&quot; class=&quot;form-control&quot; multiple=&quot;multiple&quot;&gt;
      <option value="1">FR</option>
      <option value="2">Eng</option>
      <option value="3">Es</option>
    &lt;/select&gt;
  </div>

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