摘要：本文介绍了如何使用 jQuery 和 Select2 插件获取多选下拉菜单中选中的值。通过简单的代码示例，演示了如何初始化 Select2 插件，并利用 .val() 方法获取选中的值数组，同时展示了如何监听 change 事件，在选项发生改变时动态获取选中的值。
Select2 是一个强大的 jQuery 插件，用于增强 HTML 元素的功能，提供搜索、多选等高级特性。 本文将详细介绍如何使用 jQuery 和 Select2 插件获取多选下拉菜单中选中的值。
初始化 Select2
首先，确保你已经正确引入了 jQuery 和 Select2 的相关文件（CSS 和 JavaScript）。 然后，使用以下代码初始化 Select2：
$('#language').select2();
这段代码会将 id 为 language 的 元素转换为 Select2 插件增强的下拉菜单。
获取选中的值
要获取 Select2 下拉菜单中选中的值，可以使用 jQuery 的 .val() 方法。 这个方法会返回一个包含所有选中值的数组。
var selectedValues = $('#language').val();console.log(selectedValues);
这段代码会将选中的值存储在 selectedValues 变量中，并将其打印到控制台。
监听 change 事件
如果你需要在选项发生改变时动态获取选中的值，可以监听 Select2 的 change 事件。
$('#language').select2().on('change', function(e) { var selectedValues = $('#language').val(); console.log(selectedValues);});
这段代码会在用户选择或取消选择选项时触发 change 事件，并在事件处理函数中获取并打印当前选中的值。
完整示例
以下是一个完整的示例，展示了如何使用 jQuery 和 Select2 获取选中的值：
Select2 Example $(document).ready(function() { $('#language').select2().on('change', function(e) { var selectedValues = $('#language').val(); console.log(selectedValues); }); });Select2 Example
FR Eng Es
在这个示例中，我们首先引入了 jQuery、Bootstrap 和 Select2 的 CSS 和 JavaScript 文件。 然后，我们创建了一个 id 为 language 的 元素，并使用 multiple=”multiple” 属性使其支持多选。 最后，我们在 JavaScript 代码中使用 $(‘#language’).select2() 初始化 Select2，并监听 change 事件来获取选中的值。
注意事项
确保正确引入 jQuery 和 Select2 的相关文件。 元素必须具有 multiple=”multiple” 属性才能支持多选。.val() 方法返回的是一个字符串数组，即使只选择了一个选项。
总结
本文介绍了如何使用 jQuery 和 Select2 插件获取多选下拉菜单中选中的值。 通过简单的代码示例，演示了如何初始化 Select2 插件，并利用 .val() 方法获取选中的值数组，同时展示了如何监听 change 事件，在选项发生改变时动态获取选中的值。 希望本文能够帮助你更好地使用 Select2 插件。
以上就是使用 jQuery 和 Select2 获取选中的值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/101094.html
微信扫一扫 
支付宝扫一扫 
