Select2() 不是 function

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

當我開始將 select2 與 XCrud 一起使用時，我遇到了這個問題。 我通過禁用 XCrud 加載 JQuery 來解決它，這是第二次，並將其加載到 body 標記下方。 因此，請確保 JQuery 不會在您的頁面上加載兩次。

Answer 2

如果在 select2 js 文件之前加載使用選擇框綁定 select2 的 js 文件，則會引發此錯誤。 請確保文件應按此順序排列，例如..

• 查詢
• 選擇 2 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

我也遇到了同樣的問題，請注意，發生此錯誤是因為我使用 select2 的選擇器不存在或未加載。

因此，通過執行以下操作確保 $("#selector") 存在

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

Answer 5

從document.ready()函數中添加$("#id").select2() 。

Answer 6

我使用了 jQuery slim 版本並收到此錯誤。 通過使用普通的 jQuery 版本，問題得到了解決。

Answer 7

這個問題已經很老了，但我會寫一些小筆記，因為我今天花了幾個小時調查同樣的問題。 在我動態加載部分代碼后，select2 無法在新的選擇框上運行，並顯示錯誤“$(...).select2 不是函數”。

我發現在非打包的 select2.js 中有一行阻止它重新處理 main 函數（在我的 3.5.4 版本中它在第 45 行）：

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

所以我只是在那里評論它並開始使用 select2.js （而不是縮小版本）。

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

它開始工作得很好，當然它現在可以進行多次處理而失去性能，但無論如何我都需要它。

希望這會有所幫助，弗拉基米爾

Answer 8

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

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 文檔更晚，並且都晚於 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>

第一個.js

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

第二個.js

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

Answer 14

ControlId.select2({...}); 沒有工作，但以下工作：

$(ControlId).select2({...});