Question

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

Ex：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 <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

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);

工作正常。

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

2 个答案: