“未为Select2未定义错误定义查询功能”


Answers:


241

在此Google网上论坛主题中涵盖

问题是由于select2添加了额外的div。Select2添加了带有“ select2-container form-select”类的新div,以包装创建的选择。因此,下次我加载该函数时,由于将select2附加到div元素上而引发了错误。我改变了选择器...

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

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

以某种方式为我修复了该问题,在我的情况下,我正在克隆一行包含select2化选择菜单的表单输入,并且在第一次克隆后发生了各种奇怪的事情。
martincarlin87

也必须在里面$(document).ready(function() { $('select.form-select').select2()})
TED

1
如何在Angular UI Select2指令中解决相同的问题?
zavidovych 2014年

今天只是遇到了同样的问题-尽管以前相同的代码没有问题(也许是select2的更新?)。无论如何,这也为我解决了问题,并再次正常工作。好答案!
user756659 2014年

10
如果选择控件已经由该.select2({})方法初始化,通常会发生此问题。更好的解决方案是先调用destroy方法。例如:$("#mySelectControl").select2("destroy").select2({});
Dmitry S.

18

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


13

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

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

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


2
当我将select2框从实际的select元素迁移到稍后填充的input type = hidden元素时,我遇到了这个问题。在逐步执行select2代码时,由于没有传递任何查询,ajax,数据或标签值,因此会引发此错误。–
Daniel

1
这应该是该问题的公认答案。不确定为什么select2()不只是接受空参数
swdev


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则会收到此错误。


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应用程序中蓬勃发展


4

当将ajax与文本框一起使用时,我也遇到了相同的错误,然后我通过删除文本框的class select2和通过id设置select2来解决该问题,例如:

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

3

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

万一该元素确实存在,则可以在input不向select2提供任何东西的情况下在元素上调用select2 ,select2应该从那里获取数据。通常,一个呼叫.select2({data: [{id:"firstid", text:"firsttext"}])


2

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

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


您的意思是“ <input type ='hidden'class ='foo'....”,如果您有多个select2,它们就不能全部都是'foo'吗?这对我不起作用。
dethSwatch 2015年

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

如果选项中不存在查询,则会引发此错误。内部维护检查,要求以下任一参数

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

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


0

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

这是我的代码有错误

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

下面的代码解决了该问题。

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

我会用$('#carstatus-select')。select2(“ val”,[1,2]); 正如文档中所提到的
hakuna1811 '17

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"));
        }

现在一切似乎都可以正常工作,但是如果我想尝试弄清楚代码中到底是什么引起了错误,它仍然会登录错误。但是就目前而言,这对我来说已经足够了。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.