javascript 从另一个多选 2 框中删除所选项目时，从多选 2 框中删除所选项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24820171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove a selected item from multiple select2 box on removal of selected item from another multiple select 2 box
提问by Gikar
I have two multiple select2 boxes, Box1 options are populated dynamically,when i select any option from this select box, it should get added to the new Box2. This scenario is working as required. Problem i am facing is. When i remove any selected item from the Box1, i am able to remove it from Box2. But if that item is selected in Box2 it still remains.
我有两个多个 select2 框，Box1 选项是动态填充的，当我从这个选择框中选择任何选项时，它应该被添加到新的 Box2 中。此方案按要求工作。我面临的问题是。当我从 Box1 中删除任何选定的项目时，我可以从 Box2 中删除它。但是，如果在 Box2 中选择了该项目，它仍然会保留。
Ex: A,B,C are selected values in Box 1, Box2 gets populated with A,B,C. If i select B,c in Box 2 and if i remove B from Box1. My Box2 items will now be AC. But B,C will still remain selected in Box2.
例如：A、B、C 是框 1 中的选定值，框 2 填充了 A、B、C。如果我在 Box 2 中选择 B,c 并且如果我从 Box1 中删除 B。我的 Box2 物品现在是 AC。但 B、C 仍将在 Box2 中保持选中状态。
Can anyone help me in solving this tricky problem.
谁能帮我解决这个棘手的问题。
$("#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();
});
采纳答案by John S
After you alter the child <option>elements of a Select2 <select>element, you should call .change()on it to get it to update its display.
在更改<option>Select2<select>元素的子元素后，您应该调用.change()它来更新其显示。
$('#Box2').change();
But in your case, you probably also want to restore the value of the Select2 after you remove and re-add the options.
但在您的情况下，您可能还希望在删除并重新添加选项后恢复 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);
});
When you use .select2('val', val)to set the value, you do not need to call .change().
当您使用.select2('val', val)设置的值，你不需要调用.change()。
回答by Chinh Vo Wili
I have referenced from the post of Pierre de LESPINAY Glideh. And I tried to apply to my project.
我参考了 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);
It worked fine.
它工作得很好。
