$(…).selectpicker ist keine Funktion

Lesezeit: 3 Minuten

Benutzeravatar von Djov
Djov

Ich verwende Bootstrap-Select für ein Formular. Ich füge die Skripte (jquery, bootstrap-select) in den Header der HTML-Datei ein.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Alle ausgewählten Elemente mit der Klasse “selectpicker” wurden alle korrekt aufgerufen. Beispiel für das select-Element:

<select id="test" class="selectpicker">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
</select>

Wenn ich jedoch das folgende Skript auf der gleichen Seite aufrufe

<script>
$(document).ready(
    function () {
        $('#test').selectpicker('val', 'Relish')
});
</script>

Ich bekomme diesen bösen Fehler

$(…).selectpicker ist keine Funktion

Wenn ich mir die Registerkarte “Quellen” in Google Chrome ansehe, sehe ich, dass bootstrap-select.min.js gut geladen ist. Hat jemand Vorschläge?

  • Aus ihrer Dokumentation müssen Sie auch Bootstrap selbst hinzufügen: Requires jQuery v1.8.0+, Bootstrap’s dropdown.js component, and Bootstrap's CSS silviomoreto.github.io/bootstrap-select

    – Rory McCrossan

    12. April 2017 um 9:06 Uhr


  • Können Sie ein Live-Beispiel zeigen?

    – Codemax

    12. April 2017 um 9:09 Uhr

  • Sie müssen einschließen cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/… sowie

    – Vinod Ludwig

    12. April 2017 um 9:11 Uhr

  • Leider war dies nicht das Problem. Bootstrap war bereits in der Datei enthalten (andere HTML-Ansicht).

    – Djov

    12. April 2017 um 9:41 Uhr

Benutzeravatar von Calin Vlasin
Kalin Vlasin

Wenn Sie eine andere haben jquery.js Referenz, die danach geladen wird bootstrap-select.min.js es wird auslöschen $(...).selectpicker Funktion und andere Funktionen. Stellen Sie sicher, dass bootstrap-select.min.js zuletzt geladen wird.

  • Das war’s. Jquery wurde in meiner Lösung dummerweise doppelt geladen. Vielen Dank, was für ein Anfängerfehler.

    – Djov

    12. April 2017 um 11:52 Uhr

  • Ich habe das versucht, aber es funktioniert nicht.. sagt immer noch Uncaught TypeError: $ (…).

    – Khushbu Vaghela

    19. Mai 2021 um 13:13 Uhr


  • Ich fand die Lösung .selectpicker() funktioniert in document.ready()

    – Khushbu Vaghela

    20. Mai 2021 um 4:44 Uhr

Benutzeravatar von DevTheJo
DevTheJo

Versuchen Sie, Bootstrap vor Bootstrap-Select zu laden 😉

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

Aus irgendeinem Grund muss dies über jquery aufgerufen werden

$("#MyDropDown").selectpicker('render');

Dies (nicht jquery) erzeugt den Fehler:

mdd = document.getElementById("MyDropDown");
mdd.selectpicker('render');

Mich interessiert, warum.

  • Hallo, da SelectPicker eine Jquery-Bibliothek ist, bedeutet dies, dass es nur mit Jquery-Objekten und nicht mit aus dem Dom ausgewählten „echten“ Elementen funktioniert und reagiert. Wenn Sie besser suchen, können Sie feststellen, dass das von jquery zurückgegebene Element ( using $('#elemnt-id') ) ist ganz anders document.getElementById("elemnt-id");.

    – Hicham O-Sfh

    9. Juni 2021 um 1:08 Uhr

  • Danke @HichamO-Sfh, das macht Sinn.

    – Nick.McDermaid

    9. Juni 2021 um 2:35 Uhr

1446490cookie-check$(…).selectpicker ist keine Funktion

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy