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

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

初始化 Select2

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

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

<select id="language" class="form-control" multiple="multiple" data-toggle="select2">
  FR
  Eng
  Es
</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 获取选中的值：

  
  
  
  
  


  

    
Select2 Multiple Select Example
    <select id="language" class="form-control" multiple="multiple">
      FR
      Eng
      Es
    </select>
  

  

注意事项

• 确保 jQuery 和 Select2 的版本兼容。
• Select2 提供了丰富的配置选项，可以根据需求进行定制，例如搜索、占位符等。
• 如果你的 Select2 元素是通过 AJAX 动态加载的，请确保在元素加载完成后再初始化 Select2 插件。
• 如果使用了 Bootstrap，确保 Bootstrap 的 CSS 文件在 Select2 的 CSS 文件之前引入，以避免样式冲突。

总结

通过本文，你学习了如何使用 jQuery 和 Select2 插件来创建一个多选下拉列表，并获取用户选中的值。 掌握这些技巧可以帮助你更好地处理 Web 应用中的用户输入，提高用户体验。 记住，在实际应用中，可以根据具体需求对 Select2 进行配置和定制，以满足不同的业务场景。

到这里，我们也就讲完了《jQuerySelect2获取选中值技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！