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

使用 jQuery 和 Select2 获取选中值

霞舞

发布： 2025-08-20 17:38:02

原创

943人浏览过

使用 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 属性，使其支持多选。

<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>

登录后复制

然后，使用 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>
    <select id="language" class="form-control" multiple="multiple">
      <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("Selected Values:", selectedValues);
      });
    });
  </script>
</body>
</html>

登录后复制