"Fungsi kueri tidak ditentukan untuk kesalahan tak ditentukan Select2"

121

Mencoba menggunakan Select2 dan mendapatkan kesalahan ini pada beberapa bidang input / teks item:

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

Jawaban:

241

Tercakup dalam utas grup google ini

Masalahnya adalah karena div ekstra yang ditambahkan oleh select2. Select2 telah menambahkan div baru dengan kelas "select2-container form-select" untuk membungkus pilihan yang dibuat. Jadi pada saat saya memuat fungsi, kesalahan itu dilemparkan saat select2 dilampirkan ke elemen div. Saya mengubah pemilih saya ...

Awali pengenal css select2 dengan nama tag tertentu "pilih":

$('select.form-select').select2();
Daniel Morris
sumber
entah bagaimana memperbaikinya untuk saya, dalam kasus saya, saya mengkloning sederet input formulir yang termasuk menu pilih select2-ified dan segala macam hal aneh terjadi setelah klon pertama.
martincarlin87
Juga harus di dalam$(document).ready(function() { $('select.form-select').select2()})
TED
1
Bagaimana masalah yang sama dapat diselesaikan dalam direktif Angular UI Select2?
zavidovych
Baru saja menemukan masalah yang sama hari ini - meskipun kode yang sama sebelumnya tidak memiliki masalah (mungkin pembaruan dari select2?). Bagaimanapun, ini menyelesaikannya untuk saya juga dan berfungsi dengan baik lagi. Jawaban yang bagus!
pengguna756659
10
Masalah ini biasanya terjadi jika kontrol pemilihan sudah diinisialisasi oleh .select2({})metode. Solusi yang lebih baik adalah memanggil metode penghancuran terlebih dahulu. Contoh:$("#mySelectControl").select2("destroy").select2({});
Dmitry S.
18

Pesan kesalahan ini terlalu umum. Salah satu kemungkinan sumber lainnya adalah Anda mencoba memanggil select2()metode pada masukan yang sudah "dipilih".

Martin D
sumber
13

Jika Anda menginisialisasi input kosong, lakukan ini:

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

Baca komentar pertama di bawah ini, ini menjelaskan mengapa dan kapan Anda harus menggunakan kode dalam jawaban saya.

kappaallday
sumber
2
Saya mengalami masalah ini ketika saya memigrasi kotak select2 dari elemen pilih yang sebenarnya ke tipe input = elemen tersembunyi yang saya isi nanti. Saat menelusuri kode select2, kesalahan ini muncul karena tidak ada nilai kueri, ajax, data, atau tag yang diteruskan.
Daniel
1
Ini harus menjadi jawaban yang diterima untuk pertanyaan ini. Tidak yakin mengapa select2()tidak hanya menerima parameter kosong
swdev
11

Saya juga punya masalah ini memastikan bahwa Anda tidak menginisialisasi select2 dua kali.

Pedro Dias
sumber
sama bagi saya, tetapi kesalahan itu bukan masalah bagi saya. s2 tetap berfungsi
Reign. 85
bagaimana cara melakukannya?
khaled saleh
7

Bagi saya, masalah ini bermuara pada pengaturan atribut data-ui-select2 yang benar:

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


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

$scope.selectedProjectManager = {};

Jika saya melepas dataproperti pada $scope.projectManagerssaya mendapatkan kesalahan ini.

parlemen
sumber
5

Masalah ini bermuara pada bagaimana saya membangun kotak pilih pilih2 saya. Dalam satu file javascript saya punya ...

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

Dan di file js lain sebuah override ...

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

Memindahkan penggantian kedua ke acara pemuatan jendela menyelesaikan masalah.

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

Masalah ini berkembang di dalam aplikasi Rails

keaplogik
sumber
4

Saya juga mendapat kesalahan yang sama saat menggunakan ajax dengan textbox lalu saya mengatasinya dengan menghapus class select2 dari textbox dan mengatur select2 oleh id seperti:

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

Tampaknya pemilih Anda mengembalikan elemen yang tidak ditentukan (Oleh karena undefined erroritu dikembalikan)

Jika elemen benar-benar ada, Anda memanggil select2 pada inputelemen tanpa menyediakan apa pun ke select2, tempat asal pengambilan datanya. Biasanya, satu panggilan .select2({data: [{id:"firstid", text:"firsttext"}]).

koppor
sumber
2

Juga mendapat kesalahan yang sama saat menggunakan ajax.

Jika Anda menggunakan ajax untuk merender formulir dengan select2, kelas input_html harus berbeda dari yang TIDAK dirender menggunakan ajax. Tidak begitu yakin mengapa ini bekerja seperti ini.

mfamador.dll
sumber
Maksud Anda seperti, "<input type = 'hidden' class = 'foo' ...." di mana jika Anda memiliki beberapa select2, tidak boleh semuanya 'foo'? Ini tidak berhasil untuk saya.
dethSwatch
1
if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

Ini dilemparkan karena kueri tidak ada dalam opsi. Secara internal ada pemeriksaan yang dipertahankan yang membutuhkan salah satu dari berikut ini untuk parameter

  • ajax
  • tag
  • data
  • pertanyaan

Jadi, Anda hanya perlu menyediakan salah satu dari 4 opsi ini untuk memilih2 dan itu akan berfungsi seperti yang diharapkan.

Sahil Jain
sumber
0

Saya mendapat kesalahan yang sama. Saya telah menggunakan select2-3.5.2

Ini adalah kode saya yang mengalami kesalahan

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

Kode di bawah memperbaiki masalah.

    $('#carstatus-select').val([1,2]);
Jyo Reddy
sumber
Saya akan menggunakan $ ('# carstatus-select'). Select2 ("val", [1,2]); sebagaimana disebutkan dalam dokumen
hakuna1811
0

Saya memiliki Aplikasi Web yang rumit dan saya tidak tahu persis mengapa kesalahan ini terjadi. Itu menyebabkan JavaScript dibatalkan saat dibuang.

Di select2.js saya mengubah:

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

untuk:

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

Sekarang semuanya tampaknya berfungsi dengan baik tetapi masih melakukan kesalahan jika saya ingin mencoba dan mencari tahu apa sebenarnya dalam kode saya yang menyebabkan kesalahan. Tetapi untuk saat ini, ini adalah perbaikan yang cukup baik untuk saya.

Luke Wenke
sumber
-2

gunakan:

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

}
Mahdi Bagheri
sumber
ini hanya akan menyembunyikan kesalahan, bukan memperbaikinya. Ini bukanlah solusi dalam sebagian besar kasus
Ramses