"Select2 정의되지 않은 오류에 대해 정의되지 않은 쿼리 함수"

Select2를 사용하려고 시도하고 여러 항목 입력 / 텍스트 필드에서이 오류가 발생합니다.

"query function not defined for Select2 undefined error"

이 Google 그룹 스레드에 포함

문제는 select2에 의해 추가 된 추가 div 때문이었습니다. Select2는 생성 된 선택을 래핑하기 위해 "select2-container form-select"클래스로 새 div를 추가했습니다. 그래서 다음에 함수를로드 할 때 select2가 div 요소에 연결되어 오류가 발생했습니다. 선택기를 변경했습니다 ...

특정 태그 이름 "select"가있는 select2 css 식별자 접두사 :

$('select.form-select').select2();

이 오류 메시지는 너무 일반적입니다. 다른 가능한 소스 중 하나는 select2()이미 "select2ed"입력에 대해 메소드 를 호출하려는 것 입니다.

빈 입력을 초기화하는 경우 다음을 수행하십시오.

$(".yourelement").select2({
 data: {
  id: "",
  text: ""
 }
});

아래의 첫 번째 주석을 읽으면 내 대답에 코드를 사용해야하는 이유와시기를 설명합니다.

나는 또한이 문제가 있었는데 select2를 두 번 초기화하지 않았는지 확인했습니다.

나를 위해이 문제는 올바른 data-ui-select2 속성을 설정하는 것으로 요약됩니다.

<input type="text" data-ui-select2="select2Options.projectManagers" placeholder="Project Manager" ng-model="selectedProjectManager">


$scope.projectManagers = { 
  data: []  //Must have data property 
}

$scope.selectedProjectManager = {};

내가 data속성을 $scope.projectManagers벗으면이 오류가 발생합니다.

이 문제는 select2 선택 상자를 구축하는 방법으로 요약됩니다. 하나의 자바 스크립트 파일에서 ...

$(function(){
  $(".select2").select2();
});

그리고 다른 js 파일에서 재정의 ...

$(function(){
    var employerStateSelector = 
                $("#registration_employer_state").select2("destroy");
    employerStateSelector.select2({
    placeholder: 'Select a State...'
    });
});

두 번째 재정의를 창로드 이벤트로 이동하면 문제가 해결되었습니다.

$( window ).load(function() {
  var employerStateSelector = 
              $("#registration_employer_state").select2("destroy");
  employerStateSelector.select2({
    placeholder: 'Select a State...'
  });
});

이 문제는 Rails 애플리케이션에서 발생했습니다.

또한 텍스트 상자와 함께 ajax를 사용할 때 동일한 오류가 발생 한 다음 텍스트 상자의 select2 클래스 를 제거 하고 다음 과 같이 id로 select2를 설정 하여 해결합니다 .

$(function(){
  $("#input-select2").select2();
});

선택기가 정의되지 않은 요소를 반환하는 것 같습니다 (따라서 undefined error반환 됨).

요소가 실제로 존재하는 input경우 데이터를 가져와야하는 select2에 아무것도 제공하지 않고 요소 에 대해 select2를 호출 합니다. 일반적으로 .select2({data: [{id:"firstid", text:"firsttext"}]).

또한 ajax를 사용할 때 동일한 오류가 발생했습니다.

ajax를 사용하여 select2로 양식을 렌더링하는 경우 input_html 클래스는 ajax를 사용하여 렌더링되지 않은 클래스와 달라야합니다. 그래도 왜 이런 식으로 작동하는지 잘 모르겠습니다.

if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

옵션에 쿼리가 없기 때문에 발생합니다. 내부적으로는 매개 변수에 대해 다음 중 하나가 필요한 점검이 있습니다.

• 아약스
• 태그
• 데이터
• 질문

따라서 select2에이 4 가지 옵션 중 하나를 제공하면 예상대로 작동합니다.

같은 오류가 발생했습니다. select2-3.5.2를 사용하고 있습니다.

이것은 오류가있는 내 코드였습니다.

    $('#carstatus-select').select2().val([1,2])

아래 코드는 문제를 해결했습니다.

    $('#carstatus-select').val([1,2]);

복잡한 웹 앱이 있는데이 오류가 발생하는 이유를 정확히 알 수 없습니다. 던져 질 때 JavaScript가 중단되었습니다.

select2.js에서 변경했습니다.

        if (typeof(opts.query) !== "function") {
            throw "query function not defined for Select2 " + opts.element.attr("id");
        }

에:

        if (typeof(opts.query) !== "function") {
            console.error("query function not defined for Select2 " + opts.element.attr("id"));
        }

이제 모든 것이 제대로 작동하는 것 같지만 내 코드에서 정확히 무엇이 오류를 일으키는 지 알아 내고 싶은 경우를 대비하여 여전히 오류가 발생합니다. 그러나 지금은 이것은 나에게 충분한 해결책입니다.

사용하다 :

try {
    $("#input-select2").select2();
}
catch(err) {

}