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

【问题标题】："query function not defined for Select2 undefined error"“未为 Select2 未定义错误定义查询函数”
【发布时间】：2013-01-07 03:31:23
【问题描述】：

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

"query function not defined for Select2 undefined error"

【问题讨论】：

标签： javascript runtime-error jquery-select2

【解决方案1】：

Covered in this google group thread

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

带有特定标签名称“select”的select2 css标识符前缀：

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

【讨论】：

不知何故为我修复了它，在我的情况下，我正在克隆一行表单输入，其中包括 select2-ified 选择菜单，并且在第一次克隆之后发生了各种奇怪的事情。
也必须在$(document).ready(function() { $('select.form-select').select2()})内
如何在 Angular UI Select2 指令中解决同样的问题？
今天刚遇到同样的问题——尽管之前的代码没有问题（也许是 select2 的更新？）。无论如何，这也为我解决了它并且再次正常工作。很好的答案！
如果选择控件已被.select2({}) 方法初始化，通常会发生此问题。更好的解决方案是首先调用 destroy 方法。例如：$("#mySelectControl").select2("destroy").select2({});

【解决方案2】：

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

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

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

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

将第二个覆盖移动到窗口加载事件中解决了这个问题。

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

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

【讨论】：

【解决方案3】：

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

如果我取消 $scope.projectManagers 上的 data 属性，我会收到此错误。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

使用 ajax 时也出现同样的错误。

如果您使用 ajax 通过 select2 呈现表单，则 input_html 类必须不同于未使用 ajax 呈现的那些。不过不太清楚为什么它会这样工作。

【讨论】：

你的意思是，“

【解决方案6】：

我在使用带有文本框的 ajax 时也遇到了同样的错误，然后我通过 remove class select2 of textbox 并通过 id 设置 select2 来解决它，例如：

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

【讨论】：

【解决方案7】：

如果您初始化一个空输入，请执行以下操作：

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

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

【讨论】：

当我将 select2 框从实际的选择元素迁移到稍后填充的 input type=hidden 元素时，我遇到了这个问题。在单步执行 select2 代码时，由于没有传入查询、ajax、数据或标签值而引发此错误。
这应该是这个问题的公认答案。不知道为什么select2() 不会简单地接受空参数

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

对我来说也一样，但这个错误对我来说不是问题。 s2 仍然有效
怎么做？

【解决方案10】：

我遇到了同样的错误。我一直在用select2-3.5.2

这是我的代码有错误

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

下面的代码解决了这个问题。

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

【讨论】：

我会使用 $('#carstatus-select').select2("val", [1,2]);如文档中所述

【解决方案11】：

我有一个复杂的 Web 应用程序，但我无法弄清楚引发此错误的确切原因。它导致 JavaScript 在抛出时中止。

在 select2.js 我改变了：

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

到：

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

现在一切似乎都可以正常工作，但如果我想尝试找出我的代码中究竟是什么导致了错误，它仍然会出现登录错误。但现在这对我来说已经足够好了。

【讨论】：

【解决方案12】：

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

这是因为选项中不存在查询而引发的。内部维护了一个检查，需要以下参数之一

ajax
标签
数据
查询

因此，您只需向 select2 提供这 4 个选项之一，它应该可以按预期工作。

【讨论】：

【解决方案13】：

使用：

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

}

【讨论】：

这只会隐藏错误，而不是修复它。在绝大多数情况下，这不是解决方案