如何根据Select2多选组件选中值更新另一组件并获取新增选中值

你的问题在于当前代码总是取第一个选中项，而不是刚新增的那个。Select2的change事件会传递包含新增/移除项信息的参数，我们可以通过e.params.added直接获取刚选中的单个值。

另外，不要在每次change事件里重新初始化第二个Select2组件，这会导致不必要的重复初始化，应该在页面加载时一次性初始化。

修正后的代码如下：

// 先初始化第二个Select2组件（只执行一次）
$('#id_new_states').select2({
    theme: "classic",
    multiple: true,
    placeholder: "Select States",
});

// 监听第一个Select2的change事件
$('#id_old_states').on("change", function (e) {
    // 仅处理新增选中项的情况
    if (e.params && e.params.added) {
        const addedItem = e.params.added;
        // 创建新选项并添加到第二个Select2
        const newOption = new Option(addedItem.text, addedItem.id, false, false);
        $('#id_new_states').prepend(newOption).trigger('change');
    }
});

关键说明： #

• e.params.added：这个对象包含刚选中项的id和text属性，直接取它就能拿到最新选中的单个值。
• 避免重复初始化第二个Select2：将初始化代码放在事件监听外面，确保只执行一次。
• trigger('change')：添加新选项后触发change事件，让Select2更新UI，否则新选项不会在下拉框中显示。

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