使用 jQuery 和 Select2 获取选中值

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

首先，确保您已经正确引入了 jQuery 和 Select2 的相关文件（CSS 和JavaScript）。通常，你需要引入 jQuery、Bootstrap (可选，用于样式) 和 Select2 的 CSS 和 JS 文件。lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jsquot；gt；lt；/scriptgt；lt；link href=quot；http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.cssquot； rel=quot；stylesheetquot； /gt；lt；链接 href=quot；https：//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.cssquot； rel=quot；stylesheetquot； /gt；lt；script src=quot；https：//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.jsquot；gt；lt；/scriptgt；登录后复制

接下来，在你的HTML中创建一个select元素，并设置多个属性，支持多选。lt；select id=quot；languagequot；class=quot；form-controlquot； multiple=quot；multiplequot； data-toggle=quot；select2quot；gt； lt；选项值=quot；1quot；gt；FRlt；/optiongt； lt；选项value=quot；2quot；gt；Englt；/optiongt； lt；option value=quot；3quot；gt；Eslt；/optiongt；lt；/selectgt；登录后复制

然后，使用 jQuery 初始化 Select2 插件：$(document).ready(function() { $('#language').select2()；})；登录后复制获取选中的值

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

$(document).ready(function() { $('#language').select2().on('change'， function(e) { var selectedValues = $('#language').val()； console.log(selectedValues)； // 输出选中的值复印 })；})；登录后复制

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

完整示例

下面是一个完整的示例，展示了如何使用 jQuery 和 Select2 获取选中的值：lt；!DOCTYPE htmlgt；lt；htmlgt；lt；headgt； lt；titlegt；Select2 Examplelt；/titlegt； lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jsquot；gt；lt；/scriptgt； lt；链接 href=quot；http：//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.cssquot； rel=quot；样式表quot； /gt； lt；链接href=quot；https：//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.cssquot； rel=quot；stylesheetquot； /gt； lt；script src="；https：//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.jsquot；gt；lt；/scriptgt；lt；/headgt；lt；bodygt；lt；div class="；containerquot；gt；lt；h1gt；Select2 多选示例lt；/h1gt；lt；select id="；languagequot； class="；form-controlquot； multiple="；multiplequot；gt；lt；option value="；1quot；gt；FRlt；/optiongt；lt；option value="；2quot；gt；Englt；/optiongt；lt；option value="；3quot；gt；Eslt；/optiongt；lt；/selectgt；lt；/divgt；lt；scriptgt；$(document).ready(function() { $('#language').select2().on('change'， function(e) { var selectedValues = $('#language').val()； console.log(quot；选定值：quot；， selectedValues)； })； })； lt；/scriptgt；lt；/bodygt；lt；/htmlgt；登录后注意复制事项确保 jQuery 和 Select2 的版本兼容。Select2提供了丰富的配置选项，可以根据需求进行定制，例如搜索、占位符。如果您的 Select2 元素是通过 AJAX 动态加载的，请确保在元素加载完成后再初始化 Select2 插件。

如果使用了 Bootstrap，确保 Bootstrap 的 CSS 文件在 Select2 的 CSS 文件中引入，婚姻风格冲突。总结

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

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