„Funkcja zapytania nie została zdefiniowana dla niezdefiniowanego błędu Select2”

121

Próba użycia Select2 i otrzymanie tego błędu w polu wejściowym / tekstowym wielu elementów:

"query function not defined for Select2 undefined error"
Daniel Morris
źródło

Odpowiedzi:

241

Omówione w tym wątku grupy Google

Problem wynikał z dodatkowego elementu div, który był dodawany przez select2. Select2 dodał nowy element div z klasą „select2-container form-select”, aby opakować utworzony element zaznaczenia. Więc następnym razem, gdy ładowałem funkcję, zgłaszany był błąd, ponieważ select2 był dołączany do elementu div. Zmieniłem selektor ...

Przedrostek identyfikatora css select2 z określoną nazwą tagu „select”:

$('select.form-select').select2();
Daniel Morris
źródło
jakoś to naprawiłem, w moim przypadku klonowałem wiersz danych wejściowych formularza, który zawierał menu wyboru select2-ified i różne dziwne rzeczy działo się po pierwszym klonie.
martincarlin87
Musi też być w środku$(document).ready(function() { $('select.form-select').select2()})
TED
1
Jak można rozwiązać ten sam problem w dyrektywie Angular UI Select2?
zavidovych
Właśnie dzisiaj natknąłem się na ten sam problem - chociaż ten sam kod wcześniej nie miał żadnych problemów (być może aktualizacja select2?). W każdym razie to rozwiązało to również dla mnie i znów działało dobrze. Świetna odpowiedź!
user756659
10
Ten problem zwykle występuje, jeśli kontrolka wyboru została już zainicjowana przez .select2({})metodę. Lepszym rozwiązaniem byłoby najpierw wywołanie metody zniszczenia. Np .:$("#mySelectControl").select2("destroy").select2({});
Dmitry S.
18

Ten komunikat o błędzie jest zbyt ogólny. Jednym z innych możliwych źródeł jest to, że próbujesz wywołać select2()metodę na już „select2ed” wejściu.

Martin D.
źródło
13

Jeśli zainicjujesz puste wejście, wykonaj następujące czynności:

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

Przeczytaj pierwszy komentarz poniżej, który wyjaśnia, dlaczego i kiedy powinieneś użyć kodu w mojej odpowiedzi.

kappaallday
źródło
2
Miałem ten problem, kiedy migrowałem pole select2 z rzeczywistego elementu select do elementu wejściowego type = hidden, który wypełniałem później. Podczas przechodzenia przez kod select2 ten błąd jest generowany, ponieważ nie ma przekazanej wartości zapytania, ajax, danych lub tagów.
Daniel
1
To powinna być akceptowana odpowiedź na to pytanie. Nie jestem pewien, dlaczego select2()po prostu nie zaakceptuje pustych parametrów
swdev
11

Miałem też ten problem, upewnij się, że nie inicjalizujesz dwukrotnie select2.

Pedro Dias
źródło
dla mnie to samo, ale błąd nie był dla mnie problemem. s2 i tak działa
Reign.85
jak to zrobić?
khaled saleh
7

U mnie ten problem sprowadzał się do ustawienia prawidłowego atrybutu 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 = {};

Jeśli zdejmę datanieruchomość na $scope.projectManagers, otrzymuję ten błąd.

parlament
źródło
5

Ten problem sprowadzał się do tego, jak budowałem moje pole wyboru select2. W jednym pliku javascript miałem ...

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

A w innym pliku js przesłonięcie ...

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

Przeniesienie drugiej zmiany do zdarzenia ładowania okna rozwiązało problem.

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

Ten problem pojawił się w aplikacji Railsowej

keaplogik
źródło
4

Otrzymałem również ten sam błąd podczas używania Ajax z polem tekstowym, a następnie rozwiązuję go, usuwając klasę select2 z pola tekstowego i ustawiając select2 według identyfikatora:

$(function(){
  $("#input-select2").select2();
});
Hoàng Nghĩa
źródło
3

Wygląda na to, że twój selektor zwraca niezdefiniowany element (Dlatego undefined error jest zwracany)

W przypadku, gdy element naprawdę istnieje, wywołujesz select2 na inputelemencie bez dostarczania czegokolwiek do select2, skąd powinien pobierać dane. Zazwyczaj dzwoni się .select2({data: [{id:"firstid", text:"firsttext"}]).

koppor
źródło
2

Występuje również ten sam błąd podczas korzystania z ajax.

Jeśli używasz Ajax do renderowania formularzy za pomocą select2, klasa input_html musi być inna niż te, które NIE są renderowane przy użyciu Ajax. Nie do końca jestem pewien, dlaczego to działa w ten sposób.

mfamador
źródło
Masz na myśli na przykład „<input type = 'hidden' class = 'foo' ....”, gdzie jeśli masz wiele select2, nie mogą one wszystkie być „foo”? To nie zadziałało dla mnie.
dethSwatch
1
if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

Jest to generowane, ponieważ zapytanie nie istnieje w opcjach. Wewnętrznie prowadzona jest kontrola, która wymaga jednego z poniższych parametrów

  • Ajax
  • tagi
  • dane
  • pytanie

Musisz więc tylko podać jedną z tych 4 opcji do select2 i powinna działać zgodnie z oczekiwaniami.

Sahil Jain
źródło
0

Mam ten sam błąd. Używam select2-3.5.2

To był mój kod, który zawierał błąd

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

Poniższy kod naprawił problem.

    $('#carstatus-select').val([1,2]);
Jyo Reddy
źródło
Użyłbym $ ('# carstatus-select'). Select2 ("val", [1,2]); jak wspomniano w dokumentacji
hakuna1811
0

Mam skomplikowaną aplikację internetową i nie mogłem dokładnie zrozumieć, dlaczego ten błąd jest generowany. Po rzuceniu JavaScript przerywał działanie.

W select2.js zmieniłem:

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

do:

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

Teraz wszystko wydaje się działać poprawnie, ale nadal loguje się błąd, na wypadek, gdybym chciał spróbować dowiedzieć się, co dokładnie w moim kodzie powoduje błąd. Ale na razie jest to dla mnie wystarczająco dobre rozwiązanie.

Luke Wenke
źródło
-2

posługiwać się :

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

}
Mahdi Bagheri
źródło
to tylko ukryje błąd, a nie naprawi go. To nie jest rozwiązanie w zdecydowanej większości przypadków
Ramzes