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

Question

我有两个多个select2框，Box1选项是动态填充的，当我从这个选择框中选择任何选项时，它应该被添加到新的Box2中。 此方案根据需要运行。 我面临的问题是。 当我从Box1中删除任何选定的项目时，我可以从Box2中删除它。 但如果在Box2中选择了该项目，它仍然存在。

例如：A，B，C是框1中的选定值，Box2填充了A，B，C。 如果我在Box 2中选择B，c，如果我从Box1中删除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();

});

Answer 1

更改Select2 <select>元素的子<option>元素后，应调用它.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

Answer 2

我引用了Pierre de LESPINAY Glideh的帖子。 我试图申请我的项目。

new_data = $.grep($('#my_input').select2('data'), function (value) {
    return value['id'] != id_to_remove;
});
$('#my_input').select2('data', new_data);

它工作正常。