select2が矢印の下にアイコンを表示していない

Question

私のselect2は完全に動作しています。ちょうど1つの小さなバグがあります。選択したボックスの下矢印アイコンが表示されません。

このユーザーに私はバグを見つけてみましたが、私はエラーを修正することができませんでしたビット混乱を作り、あなたは人を喜ばせることができ、私を助けて？コードはここでは動作しませんが、jsfiddleリンクで動作しています。

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

複数選択ドロップダウンを使用し、プラグイン（Select2）を使用して複数選択ドロップダウンメニューにドロップダウン矢印を追加していません。ドロップダウン矢印を追加する場合は、以下のようなカスタムCSSを追加する必要があります。

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

あなたはselectタグでmultiple属性を持っているので、表示されていない、それを削除します。

<select 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>