如何用jQuery和Select2快速获取下拉框选中值

在前端项目开发中，下拉选择框是收集用户选择信息的核心组件之一，Select2是基于jQuery开发的下拉增强插件，在原生select元素的基础上扩展了搜索、多选、远程数据加载等功能，大幅提升了用户交互体验。很多开发者在接入Select2后，需要获取用户最终选择的值用于后续表单提交或逻辑处理，不同选择模式下的获取方式存在区别，需要针对性处理。

基础环境准备

使用Select2前需要先引入对应的依赖资源，首先要加载jQuery库，再引入Select2的CSS和JS文件，确保插件可以正常运行。如果是通过CDN引入，可以参考以下代码片段：

<!-- 引入jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 引入Select2样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<!-- 引入Select2脚本 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

单选下拉框获取选中值

单选场景下，Select2的选中值获取逻辑和原生select元素的jQuery取值逻辑基本一致，核心是通过val()方法获取当前选中的值。首先需要在页面中初始化Select2组件，示例代码如下：

<!-- 单选下拉框结构 -->
<select id="singleSelect" style="width: 200px;">
  <option value="">请选择城市</option>
  <option value="bj">北京</option>
  <option value="sh">上海</option>
  <option value="gz">广州</option>
</select>

初始化Select2的代码：

// 初始化单选Select2
$('#singleSelect').select2({
  placeholder: '请选择城市',
  allowClear: true
});

当用户完成选择后，获取选中值的方式如下：

// 获取单选选中值
var selectedValue = $('#singleSelect').val();
console.log('单选选中值:', selectedValue); // 输出类似 "bj" 的字符串

// 如果需要获取选中的文本，可以通过find方法匹配
var selectedText = $('#singleSelect').find('option:selected').text();
console.log('单选选中文本:', selectedText); // 输出类似 "北京" 的字符串

多选下拉框获取选中值

多选场景下，Select2的val()方法会返回一个数组，包含所有选中的值，初始化时需要给select元素添加multiple属性。首先定义多选下拉框结构：

<!-- 多选下拉框结构 -->
<select id="multiSelect" multiple="multiple" style="width: 300px;">
  <option value="java">Java</option>
  <option value="python">Python</option>
  <option value="js">JavaScript</option>
  <option value="go">Go</option>
</select>

初始化多选Select2的代码：

// 初始化多选Select2
$('#multiSelect').select2({
  placeholder: '请选择掌握的语言',
  allowClear: true
});

获取多选选中值的代码如下：

// 获取多选选中值，返回数组
var multiSelectedValues = $('#multiSelect').val();
console.log('多选选中值数组:', multiSelectedValues); // 输出类似 ["java", "python"] 的数组

// 如果需要拼接为字符串提交，可以用join方法处理
var valueStr = multiSelectedValues ? multiSelectedValues.join(',') : '';
console.log('拼接后的选中值字符串:', valueStr); // 输出 "java,python"

监听选中变化获取值

实际开发中往往需要在用户每次修改选择时实时获取最新值，可以监听Select2的change事件，该事件会在用户选择、清空选项时触发。示例代码如下：

// 监听单选下拉框变化
$('#singleSelect').on('change', function() {
  var currentValue = $(this).val();
  console.log('单选值发生变化，当前值:', currentValue);
});

// 监听多选下拉框变化
$('#multiSelect').on('change', function() {
  var currentValues = $(this).val();
  console.log('多选值发生变化，当前值数组:', currentValues);
});

常见问题与注意事项

• 如果调用val()返回null，需要检查Select2是否正确初始化，或者当前下拉框是否没有选中任何值，单选场景下未选中时返回值通常为null或空字符串。
• 动态修改Select2的选中值时，需要用jQuery的val()方法赋值后再调用trigger('change')，否则Select2的显示不会同步更新，示例：$('#singleSelect').val('sh').trigger('change');
• 如果下拉框数据是动态加载的，需要在数据加载完成后再初始化Select2，避免无法正确渲染选项导致取值异常。
• 多选场景下如果用户清空了所有选择，val()的返回值为null，处理数据时需要先做非空判断，避免出现数组方法调用报错的问题。

jQuerySelect2下拉框选中值前端交互修改时间：2026-06-03 01:41:36