Verwenden von jquery Plugin select2 mit Bootstrap 3

Ich versuche select2 zu verwenden, aber ich kann nicht.Verwenden von jquery Plugin select2 mit Bootstrap 3

Ich verwende den folgenden Code in meinem <head> Abschnitt:

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

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

und das ist mein HTML und JS Code:

<script type="text/javascript"> 
$('locationMultiple').select2({ 
    theme: "bootstrap" 
}); 
</script> 

<p> 
<select class="locationMultiple form-control" multiple="multiple"> 
    <option value="1d4h7g">Abondance (74360)</option> 
    <option value="lf9k9d">Alby-Sur-Cheran (74540)</option> 
    ... 
</select> 
</p>

Aber meine wählen verzweifelt bleibt, wie mehrere Zeilen.
Kann mir jemand helfen zu wissen, wo und was ich falsch mache?

Quelle

2016-05-26 Laurent

prüfen, ob es einen Fehler in der Konsole ist –

Dieser Kodex für Sie auf jeden Fall funktionieren ...

Sie müssen diesen Code in Javascript schreiben:

$(document).ready(function() { 
    $.fn.select2.defaults.set("theme", "bootstrap"); 
    $(".locationMultiple").select2({ 
     width: null 
    }) 
});

anschauliches Beispiel: https://jsfiddle.net/rajnikpatel/1vje5rxo/

Quelle

2016-05-26 09:33:42

Danke, es funktioniert gut auf der Geige, aber nicht auf meiner Website ... – Laurent

Bitte stellen Sie sicher, dass Sie rechts css Pfad '' select2-bootstrap.css' hinzufügen –

@Laurent - I Denken Sie nur bewegen Sie Ihre select2 Js-Code in $ (Dokument) .ready() Oder verschieben Sie es zu Körper zuletzt funktioniert (wenn Js-Code vor Element auswählen). Überprüfen Sie auch die Browser-Konsole, wenn ein Fehler aufgetreten ist –

Verwenden von jquery Plugin select2 mit Bootstrap 3

Antwort

Verwandte Themen