Select2 does not show options

Question

현재 ASP.NET MVC 프로젝트에서 select2.js를 테스트하고 있습니다. "정상적인"뷰의 첫 번째 테스트는 정상적으로 작동했지만 이제는 ajax 당로드되고 일반 뷰 페이지의 div 안에 표시되는 부분 뷰 내부의 선택 상자에이를 추가하려고합니다.

드롭 다운을 생성하는 코드는 다음과 같습니다

@Html.DropDownList("addRole", new SelectList(ViewBag.availableRoles, "Id", "Name"), "Rolle auswählen", new { @name="addRole", @class = "form-control" }) 

과 부분보기 파일의 끝에

나는 다음과 같은 추가 :

$(document).ready(function() { 
    //var data = [{ id: 1, text: "Test" }]; 

    $("#addRole").select2({ 
     //data: data 
    }); 
}); 

그것은 때문에 작품처럼 보인다 선택 상자의 모양이 바뀌지 만 열려고하면 아무 것도 표시되지 않습니다. 위의 "데이터 세트"js 코드의 주석을 제거하면 동일하게 나타납니다. 그것은 나에게 어떤 것도 보여주지 못하고 이유를 모르겠습니다.

저는 이미 $ (document) .ajaxComplete 또는 ajax 호출의 성공 함수에 자바 스크립트 코드를 추가하려고했지만 아무 것도 변경하지 않았습니다.

Answer 1

나는 지금 대답을 얻었다. 문제는 select2 요소에 항목이 없다는 것이 아니라 주어진 항목이 표시되지 않는 것이 문제였습니다. 그래서 나는 그들이 왜 나타나지 않았고 내가 정말로 어리 석다는 것을 알았는지에 대해 생각했습니다. 그것은 나타 났지만 z- 인덱스 때문에 볼 수 없습니다. 내 팝업 창이 20k의 Z- 색인을 가지므로 드롭 다운 목록이 창 뒤에있었습니다.

.select2-dropdown { 
    z-index:99999; 
} 

을 또는이 같은 주어진 Z- 인덱스로 선택 2 설정에 dropdownCssClass를 추가 :

그래서 그냥 추가 해결하기 위해

.select2-dropdown.increasezindex { 
    z-index:99999; 
} 

JS :

$(document).ready(function() { 
    $("#addRole").select2({ 
     dropdownCssClass:'increasezindex' 
    }); 
});