Xóa mục đã chọn khỏi nhiều hộp chọn2 khi xóa mục đã chọn khỏi một hộp chọn khác 2

Question

Tôi có hai hộp select2, tùy chọn Box1 được điền động, khi tôi chọn bất kỳ tùy chọn nào từ hộp chọn này, nó sẽ được thêm vào Box2 mới. Kịch bản này hoạt động theo yêu cầu. Vấn đề tôi đang phải đối mặt là. Khi tôi xóa bất kỳ mục đã chọn nào từ Box1, tôi có thể xóa nó khỏi Box2. Nhưng nếu mục đó được chọn trong Box2 nó vẫn còn.

Ví dụ: A, B, C là giá trị được chọn trong Hộp 1, Hộp 2 được điền bằng A, B, C. Nếu tôi chọn B, c trong Hộp 2 và nếu tôi xóa B khỏi Box1. Các mục Box2 của tôi giờ đây sẽ là AC. Nhưng B, C sẽ vẫn được chọn trong Box2.

Bất kỳ ai cũng có thể giúp tôi giải quyết vấn đề phức tạp này.

$("#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

Sau khi bạn thay đổi con <option> yếu tố của một yếu tố Select2 <select>, bạn nên gọi .change() vào nó để làm cho nó cập nhật hiển thị của nó.

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

Nhưng trong trường hợp của bạn, có lẽ bạn cũng muốn khôi phục lại giá trị của Select2 sau khi bạn loại bỏ và tái thêm các tùy chọn.

$("#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); 
}); 

Khi bạn sử dụng .select2('val', val) để đặt giá trị, bạn không cần gọi .change().

jsfiddle

Answer 2

Tôi đã tham chiếu từ bài viết của Pierre de LESPINAY Glideh. Và tôi đã cố gắng áp dụng cho dự án của mình.

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

Nó hoạt động tốt.