bootstrap select zeigt nicht ersetzen orignal dropdown aber fügen Sie eine eigene

Question

Ich benutze this für Select Combo, nach dem Hinzufügen seiner CSS-und JS-Dateien habe ich dieses Ergebnis. Hier, was ich bisher versucht habe.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css"/> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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.4/js/bootstrap-select.js"></script> 
 

 

 
<select class="selectpicker show-tick form-control"> 
 
    <option>pen</option> 
 
    <option>pencil</option> 
 
    <option selected>brush</option> 
 
</select>

Der Ausgang.

So können Sie bitte einen Blick auf diese haben, warum dies geschieht?

Answer 1

dies ist, weil die Reihenfolge der Lade CSS-Datei nicht korrekt ist. Die Combo-CSS-Datei muss nach dem Laden aller anderen CSS-Dateien geladen werden, dann wird das Problem behoben. Wenn immer noch nicht aufgelöst, dann überschreiben CSS-Klassen oder -Eigenschaften irgendwo.

Answer 2

das Skript hinzufügen Bootstrap

$('select').selectpicker(); 

Answer 3

Das Problem wählen zu initialisieren wird rel="stylesheet" in beiden der link Tags fehlt.

Hinzufügen rel="stylesheet" zu beiden link Tags und es wird gut funktionieren. Beispiel unten.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" 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.4/css/bootstrap-select.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> 
 

 
<select class="selectpicker show-tick form-control"> 
 
    <option>pen</option> 
 
    <option>pencil</option> 
 
    <option selected>brush</option> 
 
</select>

Answer 4

Hier ist ein FIDDLE zu spielen. Beachten Sie die Reihenfolge der Links, in denen sie geladen sind.

1. Jquery 3.2.1
2. bootstrap.min.js
3. bootstrap-select.js
4. bootstrap.min.css
5. bootstrap-select.css

Es könnte einen Konflikt mit der Jquery-Version, die Sie in Ihrem Code geladen sind.

<select class="selectpicker show-tick form-control"> 
    <option>pen</option> 
    <option>pencil</option> 
    <option selected>brush</option> 
</select>