선택을 변경하지 않고 미러 선택 2 옵션

Question

두 개의 Select2 멀티 입력이 서로 옆에 있습니다. 하나는 배열에서 즉시 채워지는 옵션을 얻는 반면 다른 하나는 사용 가능한 옵션으로 시작해야합니다.

사용자가 처음부터 몇 가지 옵션을 선택하면 두 번째 옵션을 선택할 수 있습니다. 첫 번째 옵션에서 제거 할 때 두 번째에서 제거해야합니다. 두 번째에서 제거해야하며 두 번째에서 선택하면 이상적으로 제거해야합니다.

지금까지 두 번째로 이동하기 위해 처음부터 선택한 옵션을 가져 왔지만, 현재 내가하고있는 방식은 자동으로 "선택됨"을 의미합니다. 두 번째는 원하는 것이 아닙니다. 나는 그걸 옵션으로 원한다.

$('.secondSelect').select2({ //Start the second select working but blank 
    width: '100%' 
}); 

$('.firstSelect').select2({ //Start the first select with data 
    width: '100%', 
    data: initialData     
}).on("change", function() { //On a change to the first get the data and re-populate the second select 
    var obj = $(".firstSelect").select2("data"); 
    $(".secondSelect").select2({ 
     width: '100%', 
     data: obj      
    });  
}); 

는 또한 첫 번째 선택 2 변경 옵션 (다시 채우기 전에 변화를 null로 두 번째를 설정)을 제거하는 나의 시도는 완전히 명확 두 번째 선택 2의 선택된 항목에 보인다. 안좋다.

사람이 초침과 초를 모두 돌아 다니며 잘 이해할 수 있기를 바랍니다. 감사.

Answer 1

오른쪽, 알아 냈습니다.

첫 번째 select2의 배열에는 selected: true이 포함되어있어 기본적으로 "선택"되어 있습니다. 이 문제를 해결하기 위해 배열을 통해 실행 중이며 false로 다시 변경합니다. 삭제 문제는 여전히 지속되지만 너무 나쁘지는 않습니다.

 $('.secondSelect').select2({ 
      width: '100%' 
     }); 

     $('.firstSelect').select2({ 
      width: '100%', 
      data: initialData     
     }).on("change", function() { 

      var obj = $(".firstSelect").select2("data");      
     for (var i in obj) { 
     if (obj[i].selected == true) { 
      obj[i].selected = false; 
     } 
     }      
      $(".secondSelect option").remove(); 
      $(".secondSelect").select2({ 
       width: '100%', 
       data: obj      
      }); 

     }); 

나는 이것을 할 수있는 더 좋은 방법이라고 확신하지만, 지금해야 할 일이다.