"Abfragefunktion für Select2 undefined error nicht definiert"

121

Der Versuch, Select2 zu verwenden und diesen Fehler in einem Eingabe- / Textfeld für mehrere Elemente zu erhalten:

"query function not defined for Select2 undefined error"
Daniel Morris
quelle

Antworten:

241

In diesem Google-Gruppenthread behandelt

Das Problem war auf das zusätzliche Div zurückzuführen, das von select2 hinzugefügt wurde. Select2 hatte ein neues div mit der Klasse "select2-container form-select" hinzugefügt, um die erstellte Auswahl zu verpacken. Beim nächsten Laden der Funktion wurde der Fehler ausgelöst, als select2 an das div-Element angehängt wurde. Ich habe meinen Selektor geändert ...

Präfix select2 CSS-ID mit einem bestimmten Tag-Namen "select":

$('select.form-select').select2();
Daniel Morris
quelle
Irgendwie wurde das Problem für mich behoben. In meinem Fall habe ich eine Reihe von Formulareingaben geklont, die select2-ified-Auswahlmenüs enthielten, und nach dem ersten Klon passierten alle möglichen seltsamen Dinge.
Martincarlin87
$(document).ready(function() { $('select.form-select').select2()})
TED
1
Wie kann das gleiche Problem in der Angular UI Select2-Direktive gelöst werden?
Zavidovych
Ich bin heute auf dasselbe Problem gestoßen - obwohl derselbe Code zuvor keine Probleme hatte (vielleicht ein Update von select2?). Wie auch immer, das hat es auch für mich gelöst und funktioniert wieder einwandfrei. Gute Antwort!
user756659
10
Dieses Problem tritt normalerweise auf, wenn das Auswahlsteuerelement bereits von der .select2({})Methode initialisiert wurde . Eine bessere Lösung wäre, zuerst die Zerstörungsmethode aufzurufen. Beispiel:$("#mySelectControl").select2("destroy").select2({});
Dmitry S.
18

Diese Fehlermeldung ist zu allgemein. Eine der anderen möglichen Quellen ist, dass Sie versuchen, die select2()Methode für bereits "select2ed" -Eingaben aufzurufen.

Martin D.
quelle
13

Wenn Sie eine leere Eingabe initialisieren, gehen Sie wie folgt vor:

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

Lesen Sie den ersten Kommentar unten, er erklärt, warum und wann Sie den Code in meiner Antwort verwenden sollten.

Kappaallday
quelle
2
Ich hatte dieses Problem, als ich ein select2-Feld von einem tatsächlichen select-Element auf ein Eingabetyp = verstecktes Element migrierte, das ich später ausfüllte. Beim Durchlaufen des select2-Codes wird dieser Fehler ausgelöst, da keine Abfrage-, Ajax-, Daten- oder Tag-Werte übergeben wurden.
Daniel
1
Dies sollte die akzeptierte Antwort auf diese Frage sein. Ich select2()
bin
11

Ich hatte auch dieses Problem, stellen Sie sicher, dass Sie die select2 nicht zweimal initialisieren.

Pedro Dias
quelle
das gleiche für mich, aber der Fehler war für mich kein Problem. s2 funktioniert trotzdem
Reign.85
Wie macht man das?
Khaled Saleh
7

Für mich lief dieses Problem darauf hinaus, das richtige data-ui-select2-Attribut festzulegen:

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


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

$scope.selectedProjectManager = {};

Wenn ich die dataEigenschaft auf $scope.projectManagersentferne, erhalte ich diesen Fehler.

Parlament
quelle
5

Dieses Problem beschränkte sich darauf, wie ich mein Auswahlfeld select2 erstellt habe. In einer Javascript-Datei hatte ich ...

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

Und in einer anderen js-Datei eine Überschreibung ...

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

Durch Verschieben der zweiten Überschreibung in ein Fensterladeereignis wurde das Problem behoben.

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

Dieses Problem trat in einer Rails-Anwendung auf

keaplogik
quelle
4

Ich habe auch den gleichen Fehler erhalten, wenn ich Ajax mit einem Textfeld verwende. Dann löse ich ihn, indem ich die Klasse select2 des Textfelds entferne und select2 anhand der ID wie folgt einrichte:

$(function(){
  $("#input-select2").select2();
});
Hoàng Nghĩa
quelle
3

Es scheint, dass Ihr Selektor ein undefiniertes Element zurückgibt (daher undefined errorwird zurückgegeben)

Falls das Element wirklich vorhanden ist, rufen Sie select2 für ein inputElement auf, ohne select2 etwas anzugeben, von dem es die Daten abrufen soll. Normalerweise ruft man an .select2({data: [{id:"firstid", text:"firsttext"}]).

koppor
quelle
2

Habe auch den gleichen Fehler bei der Verwendung von Ajax.

Wenn Sie Ajax zum Rendern von Formularen mit select2 verwenden, muss sich die Klasse input_html von der Klasse unterscheiden, die NICHT mit Ajax gerendert wurde. Ich bin mir nicht ganz sicher, warum es so funktioniert.

mfamador
quelle
Du meinst "<input type = 'hidden' class = 'foo' ....". Wenn du mehrere select2 hast, können sie nicht alle 'foo' sein? Das hat bei mir nicht funktioniert.
dethSwatch
1
if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

Dies wird ausgelöst, da die Abfrage in den Optionen nicht vorhanden ist. Intern wird eine Prüfung durchgeführt, für die eine der folgenden Parameter erforderlich ist

  • Ajax
  • Stichworte
  • Daten
  • Abfrage

Sie müssen also nur eine dieser 4 Optionen für select2 angeben, und es sollte wie erwartet funktionieren.

Sahil Jain
quelle
0

Ich habe den gleichen Fehler bekommen. Ich habe select2-3.5.2 verwendet

Dies war mein Code, der einen Fehler hatte

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

Der folgende Code hat das Problem behoben.

    $('#carstatus-select').val([1,2]);
Jyo Reddy
quelle
Ich würde $ ('# carstatus-select') verwenden. Select2 ("val", [1,2]); wie in den Dokumenten erwähnt
hakuna1811
0

Ich habe eine komplizierte Web-App und konnte nicht genau herausfinden, warum dieser Fehler ausgelöst wurde. Das JavaScript wurde abgebrochen, wenn es geworfen wurde.

In select2.js habe ich geändert:

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

zu:

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

Jetzt scheint alles richtig zu funktionieren, aber es meldet sich immer noch ein Fehler an, falls ich versuchen möchte herauszufinden, was genau in meinem Code den Fehler verursacht. Aber im Moment ist das eine gute Lösung für mich.

Luke Wenke
quelle
-2

verwenden :

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

}
Mahdi Bagheri
quelle
Dadurch wird der Fehler nur ausgeblendet, nicht behoben. Dies ist in den allermeisten Fällen keine Lösung
Ramses