在前端表单开发场景中，Select2是一款常用的下拉选择框增强插件，它支持搜索、多选、远程数据加载等功能，而jQuery作为主流的JavaScript库，常用来配合Select2完成DOM操作和值获取。接下来将详细介绍不同场景下，使用jQuery结合Select2获取选中值的具体实现方式。
前置准备
在使用相关功能前，需要先引入jQuery库和Select2的CSS、JS文件，示例引入代码如下：
<!-- 引入jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入Select2 CSS --> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <!-- 引入Select2 JS --> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
单选下拉框选中值获取
首先创建基础的单选Select2下拉框，初始化代码如下：
<select id="singleSelect" style="width: 200px;">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<script>
// 初始化Select2
$(function() {
$('#singleSelect').select2();
});
</script>获取单选下拉框的选中值，直接使用Select2提供的val()方法即可，代码如下：
// 获取单选选中值
function getSingleSelectedValue() {
// 调用select2的val方法获取选中值
var selectedValue = $('#singleSelect').select2('val');
// 如果是新版本Select2，也可以直接使用jQuery的val方法
// var selectedValue = $('#singleSelect').val();
console.log('单选选中值：' + selectedValue);
return selectedValue;
}多选下拉框选中值获取
多选场景需要在<select>标签上添加multiple属性，初始化代码如下：
<select id="multiSelect" multiple="multiple" style="width: 300px;">
<option value="a">选项A</option>
<option value="b">选项B</option>
<option value="c">选项C</option>
<option value="d">选项D</option>
</select>
<script>
// 初始化多选Select2
$(function() {
$('#multiSelect').select2({
placeholder: '请选择多个选项',
allowClear: true
});
});
</script>多选下拉框的选中值会返回一个数组，获取方式如下：
// 获取多选选中值
function getMultiSelectedValue() {
// 获取选中的值数组
var selectedValues = $('#multiSelect').select2('val');
// 新版本也可以直接使用val方法
// var selectedValues = $('#multiSelect').val();
console.log('多选选中值数组：', selectedValues);
// 如果需要拼接成字符串
var valueStr = selectedValues.join(',');
console.log('拼接后的字符串：' + valueStr);
return selectedValues;
}监听选中值变化
实际开发中常常需要监听下拉框选中值的变化，实时获取最新值，此时可以绑定Select2的change事件：
$(function() {
// 监听单选下拉框变化
$('#singleSelect').on('change', function() {
var currentValue = $(this).select2('val');
console.log('单选值变化，当前值：' + currentValue);
});
// 监听多选下拉框变化
$('#multiSelect').on('change', function() {
var currentValues = $(this).select2('val');
console.log('多选值变化，当前值数组：', currentValues);
});
});常见问题说明
- 如果调用
val()方法返回null，需要检查Select2是否已经完成初始化，建议将取值操作放在初始化完成之后执行。 - 部分旧版本Select2不支持直接调用jQuery的
val()方法，此时需要使用select2('val')的专属API。 - 如果下拉框的值是动态加载的，需要在数据加载完成后再执行取值操作，避免获取到空值。