"query function not defined for Select2 undefined error"

Question

Trying to use Select2 and getting this error on multiple item input/text field:

"query function not defined for Select2 undefined error"

score 250 · Accepted Answer · answered Jan 23 '13 at 15:36

250

Covered in this google group thread

The problem was because of the extra div that was being added by the select2. Select2 had added new div with class "select2-container form-select" to wrap the select created. So the next time i loaded the function, the error was being thrown as select2 was being attached to the div element. I changed my selector...

Prefix select2 css identifier with specific tag name "select":

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

answered Jan 23 '13 at 15:36

Daniel Morris

6,852
8
25
30

somehow fixed it for me, in my case I was cloning a row of form inputs which included select2-ified select menus and all sorts of weird stuff was happening after the first clone. – martincarlin87 Feb 28 '14 at 12:20
Also has to be inside `$(document).ready(function() { $('select.form-select').select2()})` – TED May 08 '14 at 11:09
1

How can the same problem be solved in Angular UI Select2 directive? – zavidovych Jul 18 '14 at 00:28
1

Just came across this same problem today - although the same code previously had no issues (perhaps an update of select2?). Anyways, this solved it for me as well and working fine again. Great answer! – user756659 Sep 03 '14 at 18:52
10

This problem usually happens if the select control has already been initialized by the `.select2({})` method. A better solution would be calling the destroy method first. Ex: `$("#mySelectControl").select2("destroy").select2({});` – Dmitry S. Sep 04 '14 at 18:41
@zavidovych, to solve this in Angular2 for select2 You can initialize select2 it in ngOnInit() and destroy select2 it on ngOnDestroy(). So, in ngOnInit() {jQuery('.chzn-select').select2();} ngOnDestroy(){jQuery('.chzn-select').select2('destroy');} of course, you have to declare as declare var jQuery: any; – normalUser Aug 22 '16 at 09:03
> $("#mySelectControl").select2("destroy") Is there a way to reconfigure select2 dynamically? – Vladimir Pak Jan 09 '19 at 16:04

score 19 · Answer 2 · answered Dec 01 '14 at 12:50

19

This error message is too general. One of its other possible sources is that you're trying to call select2() method on already "select2ed" input.

answered Dec 01 '14 at 12:50

Martin D

667
1
10
25

Starmetal · Answer 3 · 2015-02-16T09:01:40.090

14

In case you initialize an empty input do this:

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

Read the first comment below, it explains why and when you should use the code in my answer.

edited Feb 16 '15 at 09:01

answered Nov 04 '14 at 11:32

Starmetal

740
6
14

2

I had this problem when I migrated a select2 box from an actual select element to a input type=hidden element that I was populating later. In stepping through the select2 code, this error is thrown because there is no query, ajax, data, or tags value passed in. – Daniel Feb 16 '15 at 08:56
1

This should be the accepted answer for this question. Not sure why `select2()` won't simply just accept empty parameters – swdev Oct 11 '16 at 01:43

score 12 · Answer 4 · answered Sep 22 '15 at 12:13

12

I also had this problem make sure that you don't initialize the select2 twice.

answered Sep 22 '15 at 12:13

Pedro Dias

121
1
3

same for me, but the error wasn't a problem to me. s2 works anyway – Reign.85 Dec 31 '15 at 11:06
how to do this? – khaled saleh Oct 07 '19 at 06:52

score 7 · Answer 5 · answered Jan 15 '14 at 16:53

For me this issue boiled down to setting the correct data-ui-select2 attribute:

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


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

$scope.selectedProjectManager = {};

If I take off the data property on $scope.projectManagers I get this error.

score 5 · Answer 6 · answered Sep 13 '13 at 16:01

This issue boiled down to how I was building my select2 select box. In one javascript file I had...

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

And in another js file an override...

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

Moving the second override into a window load event resolved the issue.

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

This issue blossomed inside a Rails application

score 4 · Answer 7 · answered Sep 19 '14 at 12:32

4

I also got the same error when using ajax with a textbox then i solve it by remove class select2 of textbox and setup select2 by id like:

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

answered Sep 19 '14 at 12:32

Nick Hoàng

417
2
6

score 3 · Answer 8 · answered Feb 11 '14 at 15:15

It seems that your selector returns an undefined element (Therefore undefined error is returned)

In case the element really exists, you are calling select2 on an input element without supplying anything to select2, where it should fetch the data from. Typically, one calls .select2({data: [{id:"firstid", text:"firsttext"}]).

score 2 · Answer 9 · answered Feb 22 '14 at 10:49

2

Also got the same error when using ajax.

If you're using ajax to render forms with select2, the input_html class must be different from those NOT rendered using ajax. Not quite sure why it works this way though.

answered Feb 22 '14 at 10:49

mfamador

101
1
6

You mean like, " – dethSwatch May 12 '15 at 18:34

score 1 · Answer 10 · edited Mar 22 '17 at 10:17

1

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

This is thrown becase query does not exist in options. Internally there is a check maintained which requires either of the following for parameters

ajax
tags
data
query

So you just need to provide one of these 4 options to select2 and it should work as expected.

edited Mar 22 '17 at 10:17

MWiesner

8,868
11
36
70

answered Mar 22 '17 at 09:47

Sahil Jain

3,649
2
14
16

score 0 · Answer 11 · answered Oct 13 '16 at 16:16

0

I got the same error. I have been using select2-3.5.2

This was my code which had error

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

Below code fixed the issue.

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

answered Oct 13 '16 at 16:16

Jyo Reddy

712
5
10

I would use $('#carstatus-select').select2("val", [1,2]); as mention in the docs – hakuna1811 Feb 15 '17 at 04:31

score 0 · Answer 12 · answered Jan 19 '17 at 04:39

I have a complicated Web App and I couldn't figure out exactly why this error was being thrown. It was causing the JavaScript to abort when thrown.

In select2.js I changed:

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

to:

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

Now everything seems to work properly but it is still logging in error in case I want to try and figure out what exactly in my code is causing the error. But for now this is a good enough fix for me.

"query function not defined for Select2 undefined error"

12 Answers12

Linked