select2 zeigt kein Pfeil nach unten Symbol

Question

Mein select2 funktioniert perfekt, ich habe nur einen kleinen Fehler, das Pfeilsymbol unten in der Auswahlbox wird nicht angezeigt, weißt du, warum?

dies den Benutzer etwas verwirrt ich den Fehler versuchte, machen finden, aber ich kann den Fehler nicht beheben, können Sie Kerle mir bitte helfen? Der Code funktioniert hier nicht, aber er funktioniert in der jsfiddle-Verbindung.

jsfiddle: http://jsfiddle.net/yszv1ob2/

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css"> 
 

 
<select multiple id="e1" style="width:300px"> 
 
    <option value="AL">Alabama</option> 
 
    <option value="Am">Amalapuram</option> 
 
    <option value="An">Anakapalli</option> 
 
    <option value="Ak">Akkayapalem</option> 
 
    <option value="WY">Wyoming</option> 
 
</select>

Answer 1

Sie haben das Dropdown-Menü Mehrfachauswahl und das verwendete Plug-in (Select2) verwendet, um den Drop-down-Pfeil nicht in das Dropdown-Menü Mehrfachauswahl einzufügen. Wenn Sie den Dropdown-Pfeil hinzufügen möchten, müssen Sie einige benutzerdefinierte CSS wie unten hinzufügen.

ul.select2-choices { 
    padding-right: 30px !important; 
} 

ul.select2-choices:after { 
    content: ""; 
    position: absolute; 
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%); 
    border-top: 5px solid #333; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
} 

Answer 2

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css"> 
 

 
<select multiple id="e1" style="width:300px"> 
 
    <option value="AL">Alabama</option> 
 
    <option value="Am">Amalapuram</option> 
 
    <option value="An">Anakapalli</option> 
 
    <option value="Ak">Akkayapalem</option> 
 
    <option value="WY">Wyoming</option> 
 
</select>

Answer 3

zeigt nicht, weil Sie multiple Attribut in der select-Tag haben, entfernen Sie einfach es: