Javascript “未为 Select2 未定义错误定义查询函数”

"query function not defined for Select2 undefined error"

提问by Daniel Morris

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

尝试使用 Select2 并在多个项目输入/文本字段上收到此错误：

"query function not defined for Select2 undefined error"

回答by Daniel Morris

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...

问题是因为 select2 添加了额外的 div。Select2 添加了带有类“select2-container form-select”的新 div 来包装创建的选择。所以下次我加载函数时，错误被抛出，因为 select2 被附加到 div 元素。我改变了我的选择器...

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

使用特定标签名称“select”为 select2 css 标识符添加前缀：

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

回答by Martin D

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.

这个错误信息太笼统了。它的其他可能来源之一是您试图select2()在已经“select2ed”的输入上调用方法。

回答by kappaallday

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.

阅读下面的第一条评论，它解释了为什么以及何时应该使用我的答案中的代码。

回答by Pedro Dias

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

我也遇到了这个问题，请确保您没有将 select2 初始化两次。

回答by parliament

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

对我来说，这个问题归结为设置正确的 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 = {};

If I take off the dataproperty on $scope.projectManagersI get this error.

如果我关闭该data属性，$scope.projectManagers则会收到此错误。

回答by keaplogik

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

这个问题归结为我如何构建我的 select2 选择框。在一个 javascript 文件中，我有...

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

And in another js file an override...

在另一个 js 文件中覆盖...

$(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

这个问题在 Rails 应用程序中出现了

回答by Hoàng Ngh?a

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

在将 ajax 与文本框一起使用时，我也遇到了同样的错误，然后我通过删除文本框的类 select2并通过 id 设置 select2 来解决它，例如：

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

回答by koppor

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

似乎您的选择器返回了一个未定义的元素（因此undefined error返回）

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

如果该元素确实存在，您将在一个input元素上调用 select2而不向 select2 提供任何内容，它应该从中获取数据。通常，一个调用.select2({data: [{id:"firstid", text:"firsttext"}]).

回答by mfamador

Also got the same error when using ajax.

使用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.

如果您使用 ajax 来呈现带有 select2 的表单，则 input_html 类必须与那些未使用 ajax 呈现的类不同。不太确定为什么它会以这种方式工作。

回答by Sahil Jain

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.

因此，您只需要为 select2 提供这 4 个选项之一，它就会按预期工作。