在从另一个多选2框中删除所选项目时从多选2框中删除所选项目

我有两个多选2框，框1选项是动态填充的，当我从这个选择框中选择任何选项时，它应该被添加到新的框2中。此方案正在按要求运行。我面临的问题是。当我从Box1中删除任何选定的项目时，我就能够将其从Box2中删除。但如果在框2中选中该项目，它仍将保留。

示例：A、B、C是框1中的选定值，框2将填充A、B、C。如果我在框2中选择B、c，并且如果我从框1中删除B。我的盒子2中的物品现在将是AC。但B、C仍将在框2中保持选中状态。

有人能帮我解决这个棘手的问题吗？

$("#Box1").on("change", function() {

    var box1List = $('#Box1').val();

    $('#Box2').empty();

    for (var key in box1List) {
        var valueField = box1List[key];
        var textField = $("#Box1 > option[value='"+valueField+"']").text();
        $("#Box2").append($('<option>', {value: valueField, text: textField}));
    }
});



$("#Box1").on("select2-removed", function(e) {

    console.log("removed val=" + e.val + " choice=" + e.choice.text);

    $('#Box2 option[value="'+e.val+'"]').remove();

});

---

解决方案

更改Select2<select>元素的子元素后，应对其调用.change()以使其更新其显示。

$('#Box2').change();

但在您的情况下，您可能还希望在删除并重新添加选项后恢复Select2的值。

$("#Box1").on("change", function() {
    var val = $('#Box2').select2('val');
    $('#Box2').empty();
    $.each($('#Box1').select2('data'), function(i, item) {
        $("#Box2").append($('<option>', {value: item.id, text: item.text}));
    });
    $('#Box2').select2('val', val);
});

使用.select2('val', val)设置值时，不需要调用.change()。

jsfiddle