select2가 아래쪽 화살표 아이콘을 표시하지 않습니다

Question

내 select2가 완벽하게 작동합니다. 선택 상자의 아래쪽 화살표 아이콘이 표시되지 않습니다. 왜 그런지 아십니까?

이 사용자 내가 버그를 발견하려고 약간의 혼동하게,하지만 오류를 수정할 수없는, 너희들은 나를 도와 주시겠습니까? 코드는 여기에서 작동하지 않지만 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

당신이 선택 태그 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>