"Funzione di query non definita per errore non definito Select2"

Tentativo di utilizzare Select2 e ottenere questo errore su più campi di testo / input di elementi:

"query function not defined for Select2 undefined error"

Coperto in questo thread del gruppo Google

Il problema era a causa del div extra che veniva aggiunto da select2. Select2 aveva aggiunto un nuovo div con la classe "select2-container form-select" per racchiudere la selezione creata. Quindi la prossima volta che ho caricato la funzione, l'errore è stato generato mentre select2 veniva allegato all'elemento div. Ho cambiato il selettore ...

Prefisso identificatore css select2 con nome tag specifico "select":

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

Questo messaggio di errore è troppo generico. Una delle sue altre possibili fonti è che stai cercando di chiamare il select2()metodo su un input già "select2ed".

Nel caso in cui inizializzi un input vuoto, fai questo:

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

Leggi il primo commento qui sotto, spiega perché e quando dovresti usare il codice nella mia risposta.

Ho anche avuto questo problema, assicurati di non inizializzare due volte select2.

Per me questo problema si è ridotto all'impostazione dell'attributo corretto 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 = {};

Se tolgo la dataproprietà su $scope.projectManagersottengo questo errore.

Questo problema si riduceva a come stavo costruendo la mia casella di selezione select2. In un file javascript avevo ...

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

E in un altro file js un override ...

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

Spostare la seconda sostituzione in un evento di caricamento della finestra ha risolto il problema.

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

Questo problema è emerso all'interno di un'applicazione Rails

Ho anche ricevuto lo stesso errore quando si utilizza ajax con una casella di testo, quindi lo risolvo rimuovendo la classe select2 della casella di testo e impostando select2 per id come:

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

Sembra che il tuo selettore restituisca un elemento indefinito (quindi undefined errorviene restituito)

Nel caso in cui l'elemento esista davvero, stai chiamando select2 su un inputelemento senza fornire nulla a select2, da cui dovrebbe recuperare i dati. Di solito si chiama .select2({data: [{id:"firstid", text:"firsttext"}]).

Inoltre ho ricevuto lo stesso errore quando si utilizza ajax.

Se stai usando ajax per visualizzare i moduli con select2, la classe input_html deve essere diversa da quelle NON renderizzate usando ajax. Non sono del tutto sicuro del motivo per cui funzioni in questo modo.

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

Questo viene lanciato perché la query non esiste nelle opzioni. Internamente viene mantenuto un controllo che richiede uno dei seguenti parametri per i parametri

• ajax
• tag
• dati
• domanda

Quindi devi solo fornire una di queste 4 opzioni per select2 e dovrebbe funzionare come previsto.

Ho ricevuto lo stesso errore. Sto usando select2-3.5.2

Questo era il mio codice che aveva un errore

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

Il codice seguente ha risolto il problema.

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

Ho un'app Web complicata e non sono riuscito a capire esattamente perché è stato generato questo errore. Stava causando l'interruzione del JavaScript quando veniva lanciato.

In select2.js ho cambiato:

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

per:

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

Ora tutto sembra funzionare correttamente, ma è ancora in corso l'accesso per errore nel caso in cui voglio provare a capire cosa esattamente nel mio codice sta causando l'errore. Ma per ora questa è una soluzione abbastanza buona per me.

uso :

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

}