Select2는 전체 너비가 아니거나 토글을 사용할 때 차단됩니다.

Question

Select2 : s (select2 플러그인 사용) 중 일부 선택 항목이 있습니다. 내가 원하는 것은 첫 번째 select2가 변경되고 특정 옵션 일 때 다른 select2를 표시한다는 것입니다. 처음에는 페이지가로드 될 때 모든 숨겨진 select2s가 jQuery의 .toggle()로 숨겨집니다. 이것은 부트 스트랩을 사용하고 모든 .form-group을 선택해야하기 때문에 필요한 것보다 더 많은 클래스를 사용하고 싶지 않기 때문입니다. 그러므로 내가 이것을 사용 :

$("#firstSelect").on("change", function(e) { 
    if ($(this).val() == "specificValue") { 
     $("#secondSelect").parents(".form-group").toggle(); 
    } else { 
     $("#secondSelect").parents(".form-group").toggle(); 
    } 
}); 

을 그러나 문제는 두 번째 선택 2는 .form 그룹 내에서 제대로 표시되지 않는 것입니다 :

$("#secondSelect").parents(".form-group").toggle(); 

나는 그 다음 선택 2를 표시하려면이 코드를 사용합니다. 다음과 같이 보입니다.

레이블의 가로와 세로가 아닙니다.

이상한 점은 크롬 관리자를 사용하고 콘솔에서 .toggle() 코드를 입력 할 때 문제가되지 않는다는 것입니다. 왜 올바르게 표시되지 않습니까? 당신이 그들에 설정 폭이없는, 따라서 숨겨진 요소를 .select2 호출 할 때하기 때문에

JSFIDDLE

Answer 1

이 문제가 발생합니다. 요소를 숨기기 전에 초기화하면 너비가 올바르게 해석됩니다. 완벽 JS 코드의 바닥에이 라인을 이동

...

$("#program").parents(".form-group").toggle(); 
$("#year").parents(".form-group").toggle(); 

updated fiddle