Select2에서 다른 Select2 선택 데이터로 항목 비활성화하기
Select2를 사용하여 선택 옵션을 만들던 중, 한 데이터 셋으로 두 개 이상의 Select2의 데이터를 동기화해야 하는 상황이 발생했습니다. 예를 들어 a, b, c, d와 같은 선택 옵션이 있고 두 개의 Select2가 있는 경우, 첫 번째 Select2에서 a 옵션을 선택하면 두 번째 Select2에서는 a가 비활성화되어야 합니다.
처음에는 같은 data object를 사용하고 'disable: true' 프로퍼티만 추가하면 될 것이라 생각했지만, 이미 생성된 select2는 갱신되지 않는 문제가 발생했습니다. 이런 경우 공식적으로 multiple 옵션을 사용하는 것이 좋지만 실무 요구사항에 따라 여러 select를 사용해야 했습니다.
복잡한 상황과 다양한 요구사항 때문에 여러 방법을 시도해 보았으나 해결책을 찾지 못했습니다. 그래서 스택오버플로우에서 비슷한 문제를 가진 사람의 글을 참조하여 해결방법을 찾았습니다(참조 링크).
리스너 설정시 주의사항
'change' 이벤트 대신 'selecte2:select' 이벤트를 사용하세요. 'change' 이벤트를 사용할 경우 'Cannot read property 'current' of null' 오류가 발생합니다.
실제 코드 예시:
.on("select2:select", function () {
$("select").not(this).find("option[value=" + $(this).val() + "]").attr('disabled', 'disabled');
$("select").not(this).find("option[value=" + previous + "]").removeAttr('disabled');
})
