Question

所以我已经下载了select2，我把它安装到我的文件夹然后将它加载到我的网站上，当我检查控制台时（我可以看到所有正在加载的脚本）我可以看到文件select2的.js

我查看了他们的文档并将其复制并添加了$("#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';
}

Answer 1

当我开始使用带有XCrud的select2时，我遇到了这个问题。我通过禁用XCrud加载JQuery来解决它，它是第二次，并将其加载到body标签下面。因此，请确保JQuery没有在您的页面上加载两次。

Answer 2

如果您使用select框选择select2的js文件在select2 js文件之前加载，则会出现此错误。请确保文件的顺序如...

Jquery
select2 js
你的js

Answer 3

有同样的问题。按照延迟加载select2进行排序

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

Answer 4

我也面临同样的问题＆amp;请注意，发生此错误是因为我使用select2的选择器不存在或未加载。

所以通过

确保$（“＃selector”）存在

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

Answer 5

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

Answer 6

将config.assets.debug = false放入config / environments / development.rb。

Answer 7

这个问题已经很老了，但是我今天花了几个小时调查同样的问题。在我动态加载了一部分代码后，select2无法解决一个错误＆＃34; $（...）的新选择框.select2不是函数＆＃34;。

我发现在非打包的select2.js中有一行阻止它重新处理main函数（在我的3.5.4版本中它在第45行）：

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

所以我只是在那里评论并开始使用select2.js（而不是缩小版）。

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

它开始工作得很好，当然它现在可以多次处理失去性能，但无论如何我都需要它。

希望这有帮助，弗拉基米尔

Answer 8

我使用了jQuery slim版本并得到了这个错误。通过使用正常的jQuery版本，问题得到了解决。

Answer 9

你可能会引用两个jquery脚本，它们会产生上述错误。

Answer 10

对我来说，select2.min.js文件代替了select2.full.min.js。我已经手动定义了从github page获取的dist文件夹中复制的文件。另外，请确保在select2文件之前导入了一个jQuery(document).ready(...)定义和jquery文件。

Answer 11

对于像我这样的新手，最终会遇到以下问题：如果您尝试对使用纯JavaScript而不是使用jQuery检索的元素调用.select2（），也会发生此错误。

此操作失败，并显示“ select2不是函数”错误：

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

这有效：

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

Answer 12

就我而言，当webpacker和sprockets都试图导入jQuery时，我在Rails应用程序中遇到此错误。在我的代码编辑器自动尝试将jQuery导入webpacker模块之前，我没有注意到它。

Answer 13

我今天遇到了同样的问题，其他答案都没有奏效。我不明白这如何或为什么起作用，但它确实并且（敲木头）仍然如此。

但首先，谈谈我的具体情况：

我在一个 .js 文件中使用 select2 并尝试将其放入另一个文件中，但出现此错误。 jQuery 在另一个 .js 文档中运行良好，而我尝试使用的第二个在 html 中比我正在编写的第一个 .js 文档称为 LATER，并且都晚于 jquery 和 select2 标签。

好的，现在对于没有意义但有效的解决方案：

我将 jQuery 元素的定义放入较早的 .js 文件中，并将该变量的 .select2 放入较晚的 .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>

first.js

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

第二个.js

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

Select2（）不是一个函数

13 个答案: