De acuerdo con esta pregunta , pude agregar el elemento seleccionado a otra selección.
Considere que tenemos dos select2, con las mismas opciones. Cuando selecciono el elemento del cuadro 1, el mismo elemento debe eliminarse del cuadro 2 y el usuario no puede seleccionarlo. Lo proporciono en jsfiddle.net .
Ahora quiero deseleccionarlo, el box2 debería tener ese elemento nuevamente.
<select multiple id="Box1" name="Box1" style='width:325px;float:left;border:1px solid #80C7E2;'> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="D">D</option> </select> <select multiple id="Box2" name="Box2" style='width:325px;float:left;border:1px solid #80C7E2;'> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="D">D</option> </select>
$("#Box1").select2(); $("#Box2").select2(); $("#Box1").on("change", function() { $.each($('#Box1').select2('data'), function(i, item) { $('#Box2 option[value="'+item.id+'"]').remove(); }); });Prueba esto, puede ayudar:
$("#Box1").select2(); $("#Box2").select2(); $("#Box1").on("change", function(e) { $("#Box2").html(""); $('#Box1 option').each(function() { if($("#Box1").val()) { if($("#Box1").val().some(e=>{return e == $(this).val()})) { $('#Box2 option[value="'+$(this).val()+'"]').remove(); } else if(!$("#Box2 option").toArray().some(e=>{return e.value == $(this).val()})) { $("#Box2").append($('<option>', {value: $(this).val(), text: $(this).text()})); } } else { $("#Box2").html($("#Box1").html()); } }); }); <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/> <select multiple id="Box1" name="Box1" style='width:325px;float:left;border:1px solid #80C7E2;'> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="D">D</option> </select> <select multiple id="Box2" name="Box2" style='width:325px;float:left;border:1px solid #80C7E2;'> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="D">D</option> </select> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>