如何在jQuery中使用Select2获取多选下拉框的选中值

先明确你代码里的几个核心问题，再给出修正方案：

• 选项value重复无意义：所有<option>的value都设为"1"，既不符合语义，也会导致选中多个选项时获取的结果完全重复，每个选项应该设置唯一且对应语言的标识值（比如FR设为"fr"、Eng设为"en"）。
• DOM加载顺序错误：你的JS代码写在<select>元素之前，此时页面DOM还未渲染出#language元素，$('#language')无法获取到目标节点，调用val()自然没有输出。
• Select2初始化时机不对：初始化Select2的代码同样需要等待DOM加载完成后再执行。

修正后的完整代码 #

<!-- 先编写HTML结构 -->
<select id="language" class="form-control" multiple="multiple" data-toggle="select2"> 
    <option value="fr">FR</option>
    <option value="en">Eng</option>
    <option value="es">Es</option>
</select>

<script>
// 等待DOM完全加载后执行JS逻辑
$(document).ready(function() {
    // 初始化Select2组件
    $('#language').select2();
    
    // 监听选中状态变化，实时获取选中值
    $('#language').on('change', function() {
        var selectedValues = $(this).val();
        console.log(selectedValues);
    });
    
    // 页面初始化时获取默认选中值（如果有）
    var defaultSelected = $('#language').val();
    console.log(defaultSelected);
});
</script>

关键说明 #

• 给每个<option>设置唯一且有业务意义的value值，确保获取的选中值符合实际需求。
• 用$(document).ready()包裹所有JS代码，保证DOM元素加载完成后再执行操作，避免找不到节点的问题。
• 通过change事件可以实时监听选中状态变化，即时获取最新的选中值；若需要页面初始化时就获取默认选中项，直接在ready回调中调用val()即可。

内容的提问来源于stack exchange，提问作者user9010429