Select2()不是函数

所以我已经下载了 select2我把它“安装”到我的文件夹中,然后在我检查控制台(在那里我可以看到所有的脚本被加载)我可以看到文件 select2.js 的时候把它加载到我的网站上

我查看了他们的文档并复制了它,然后添加了 < code > $(“ # e9”) . select2() ;

但是当我加载这个页面时,我会得到以下错误:

TypeError: $(...).select2 is not a function




$("#e9").select2();

还有其他人经历过这种事吗?

附加信息是我的剧本:

    jQuery(document).ready(function(){
var max_amount = parseFloat($('#max_amount').val());
$( "#item_amount" ).keyup(function() {
if($(this).val() > max_amount){
$(this).val( max_amount);
}
if( /\D/.test($(this).val()) ){
alert('Må kun indeholde tal!');
$(this).val('');
}
if($(this).val()== '0'){
alert('Må ikke være 0!');
$(this).val('');
}
});
$("#e1").select2();


});
function addToBasket(){
var amount = $('#item_amount').val();
if(amount == ""){
amount = 1;
}


if(amount > 0){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Products/addItemToBasket',
dataType: 'json',
data: {
id: window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1),
amount: amount
},
success: function (data) {
var urlToBasket = myBaseUrl+'Products/basket';
var newAmount = parseInt(amount)
var price = data[0]['Product']['pris'];
var id = data[0]['Product']['id'];
var dat = data;
var tmp_basket_html = $('#basket_amount').html();
if($('#basket_amount').html() !== " Tom"){
$('#shopping_table_body').append(
"<tr id='"+id+"'>" +
"<td class='image'>" +
""+
"</td>" +
"<td class='name'>" +
" "+data[0]['Product']['name'] +
"</td>"+
"<td class='quantity'>" +
"x "+amount +""+
"</td>"+
"<td class='total'>" +
""+price*amount+
"</td>" +
""+
"<td class='remove'>" +
"<input class='icon-remove' type='button' onclick='removeItemFromBasket("+id+")'>"+
"</td>"+
"</tr>"
);
}else{
$("#shopping_menu").append(
"<ul class='dropdown-menu topcartopen'>"+
"<li id='basket_list'>"+
"<table id='shopping_table'>"+
"<tbody id='shopping_table_body'>"+
"<tr id='"+id+"'>" +
"<td class='image'>" +
""+
"</td>" +
"<td class='name'>" +
" "+data[0]['Product']['name'] +
"</td>"+
"<td class='quantity'>" +
"x "+amount +""+
"</td>"+
"<td class='total'>" +
""+price*amount+
"</td>" +
""+
"<td class='remove'>" +
"<input class='icon-remove' type='button' onclick='removeItemFromBasket("+id+")'>"+
"</td>"+
"</tr>"+
"</table>"+
"</li>"+
"<div class='well pull-right'>"+
"<input type='button' onclick='goToBasket()' class='btn btn-success' value='Tjek ud'>"+
"</div>"+
"</ul>"


)
}
updateTotal(amount,price);
updateBasketAmount();
}
});
}
Notifier.success('Vare tilføjet', 'Tilføjet'); // text and title are both optional.
}
function updateTotal(amount, price){
var price = parseFloat(price);
var oldValue = parseFloat($('#basket_total_cost').html());
var newPrice = amount*price+oldValue;
$('#basket_total_cost').html(newPrice);
}
function updateBasketAmount(){
var tmp =  $('#basket_amount').html();
if(!isNaN(tmp)){
var oldAmount = parseInt(tmp.substr(0,2));
var i = oldAmount + 1;;
$('#basket_amount').html(
""+i+" vare(r)"
);
}else{
$('#basket_amount').html(
"1"+" vare(r)"
);
}
}
function goToBasket(){
window.location.href = myBaseUrl+'Products/basket';
}
184450 次浏览

如果在 select2js 文件之前加载您用 select 框绑定 select2的 js 文件,就会出现这个错误。 请确保文件按照这样的顺序排列。

  • Jquery
  • Select2 js
  • 你的 J

config.assets.debug = false放在 config/environment/development.rb 中。

当我开始在 XCrud 中使用 select2时遇到了这个问题。我通过禁用加载 JQuery 的 XCrud 来解决这个问题,这是第二次,并将其加载到 body 标记下面。因此,确保 JQuery 不会在页面上被加载两次。

这个问题已经很久了,但是我会放一些小纸条,因为我今天花了几个小时来调查相同的问题。 在我加载了一部分代码之后,select2无法在新的选择框上工作,并出现了一个错误“ $(...)。Select2不是一个函数”。

我发现,在非封装的 select2.js 中,有一行代码阻止它重新处理 main 函数(在我的3.5.4版本中,在第45行) :

if (window.Select2 !== undefined) {
return;
}

因此,我只是在那里注释了它,并开始使用 select2.js (而不是缩小版本)。

//if (window.Select2 !== undefined) {
//    return;
//}

它开始工作的很好,当然它现在可以做几次处理,失去了性能,但我需要它无论如何。

希望这对你有帮助, 弗拉基米尔

我也面临同样的问题,并注意到这个错误的发生,因为选择器上,我正在使用 select2不存在或没有加载。

因此,请确保 $(“ # selector”)存在

if ($("#selector").length > 0)
$("#selector").select2();

您可能引用了两个 jquery 脚本,它们给出了上面的错误。

我使用了 jQuery 的超薄版本并得到了这个错误,通过使用普通的 jQuery 版本问题得到了解决。

对我来说,select2.min.js文件代替 select2.full.min.js工作。我已经手动定义文件,我已经从我从 Github 页面得到的 dist 文件夹复制。还要确保在 select2文件之前导入了一个 jQuery(document).ready(...)定义和 jquery 文件。

有同样的问题。通过延迟加载 select2对它进行排序

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>

对于像我这样的新手来说,最终会遇到这样一个问题: 如果您尝试调用。对使用纯 javascript 而不使用 jQuery 检索的元素执行 select2()。

这会因为“ select2 is not a function”错误而失败:

document.getElementById('e9').select2();

这种方法是有效的:

$("#e9").select2();

document.ready()函数中添加 $("#id").select2()

在我的例子中,当 webpacker 和 spprocket 都试图导入 jQuery 时,我在 Rails 应用程序中得到了这个错误。直到我的代码编辑器自动尝试将 jQuery 导入到 webpacker 模块中,我才注意到这一点。

我今天也遇到了同样的问题其他的答案都不管用。我不知道这是怎么做到的,也不知道为什么会这样,但它确实起作用了,而且现在仍然起作用。

但首先,我要说一下我的具体情况:

我一次使用 select2。Js 文件,并试图将其放入另一个文件中,但得到了这个错误。JQuery 在另一个中运行良好。Js 文档,我尝试使用的第二个文档在 html 中比第一个文档更名为 LATER。我正在写的 js 文档,都比 jquery 和 select2标记晚。

好了,现在我们来看看这个虽然没什么意义,但确实有用的解决方案:

我将 jQuery 元素的定义放到了前面的代码中。Js 文件和。在后面的。Js 文件。很奇怪,对吧?像这样:

<head>
*blah blah blah html headers*
<script src="/static/js/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
*blah blah blah page stuff*
<script src="/static/js/first.js"></script>
*blah blah some more stuff*
<script src="/static/js/second.js"></script>

首先 Js

const selector = $('#select-this')

第二 Js

selector.select2({
*&c, &c, &c.*