javascript - 从另一个select 2框中删除选定的项目时，从select2多个框中删除选定的项目

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

例如:A，B，C是框1中的选定值，Box2中填充有A，B，C。如果我在方框2中选择B，c，并且如果我从方框1中删除B。我的Box2项目现在将为AC。但是B，C仍然在Box2中保持选中状态。

谁能帮助我解决这个棘手的问题。

$("#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 <option>元素的子<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