如何管理两个相同的 select2，隐藏和显示另一个 select2 中的选定项目

Question

根据 this question，我可以将 selected 项添加到另一个 select。

假设我们有两个 select2，具有相同的选项。当我 select 来自 box1 的项目时，相同的项目应该从 box2 中删除，而用户不能 select 它。我在 jsfiddle.net.

上提供

现在我想取消select编辑它，box2 应该又有那个项目了。

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

Answer 1

试试这个，可能会有帮助:

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

如何管理两个相同的 select2，隐藏和显示另一个 select2 中的选定项目

How could to manage two same select2, hide and show selected item from another select2

javascript

jquery

select

option

jquery-select2