121

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

"query function not defined for Select2 undefined error"
4

13 回答 13

245

涵盖在此 google 组线程中

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

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

$('select.form-select').select2();
于 2013-01-23T15:36:25.123 回答
19

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

于 2014-12-01T12:50:04.487 回答
14

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

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

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

于 2014-11-04T11:32:30.220 回答
11

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

于 2015-09-22T12:13:03.597 回答
7

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

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

于 2014-01-15T16:53:44.787 回答
5

这个问题归结为我是如何构建我的 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 应用程序中出现

于 2013-09-13T16:01:50.427 回答
4

我在使用带有文本框的 ajax 时也遇到了同样的错误,然后我通过删除文本框的类 select2 并通过 id 设置 select2 来解决它,例如:

$(function(){
  $("#input-select2").select2();
});
于 2014-09-19T12:32:18.743 回答
3

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

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

于 2014-02-11T15:15:20.600 回答
2

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

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

于 2014-02-22T10:49:46.650 回答
1
if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

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

  • 阿贾克斯
  • 标签
  • 数据
  • 询问

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

于 2017-03-22T09:47:39.443 回答
0

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

这是我的代码有错误

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

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

    $('#carstatus-select').val([1,2]);
于 2016-10-13T16:16:43.063 回答
0

我有一个复杂的 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"));
        }

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

于 2017-01-19T04:39:21.957 回答
-4

采用 :

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

}
于 2020-03-04T08:59:50.520 回答