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

"query function not defined for Select2 undefined error"

本文关键字：查询 函数 定义 错误 未为 Select2 未定义      更新时间：2023-09-26

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

"query function not defined for Select2 undefined error"

涵盖在此谷歌群组主题中

问题是由于 select2 添加的额外div。Select2 添加了带有类"select2-container form-select"的新div 来包装创建的选择。因此，下次我加载函数时，当 select2 附加到div 元素时，就会抛出错误。我更改了我的选择器...

前缀 select2 css 标识符，具有特定的标记名称"select"：

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

此错误消息太笼统。它的另一个可能来源是你尝试在已经"select2ed"的输入上调用select2()方法。

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

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

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

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

对我来说，

这个问题归结为设置正确的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属性，则会出现此错误。

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

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

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

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

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

使用 ajax 时也遇到了同样的错误。

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

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

如果选项中不存在查询，则会抛出此问题。内部有一个检查，需要以下任一参数

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

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

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

这是我的代码有错误

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

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

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

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

现在一切似乎都正常工作，但它仍然记录错误，以防我想尝试找出我的代码中导致错误的确切原因。但就目前而言，这对我来说是一个足够好的解决方案。

相关文章：