mon select2 fonctionne parfaitement, j'ai juste un petit bug, la flèche vers le bas de la zone de sélection ne s'affiche pas, savez-vous les gars pourquoi?
cela rend l'utilisateur un peu confus. J'ai essayé de trouver le bogue, mais je ne pouvais pas réparer l'erreur. Pouvez-vous m'aider, s'il vous plaît? le code ne fonctionne pas ici mais il fonctionne dans le lien 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>
Vous avez utilisé la liste déroulante multi-sélection et le plug-in utilisé (Select2) ne pas ajouter de flèche déroulante dans la liste déroulante multi-sélection. Donc, si vous souhaitez ajouter une flèche de liste déroulante, vous devez ajouter des CSS personnalisés, comme ci-dessous.
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;
}
Pour Select2 version 4.0.5+, ce code duplique exactement la flèche à sélection unique.
.select2-selection--multiple:before {
content: "";
position: absolute;
right: 7px;
top: 42%;
border-top: 5px solid #888;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
N'affiche pas car vous avez l'attribut multiple
dans la balise select, supprimez-le simplement:
<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>
$("#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>
$(function () {
$("#select1").select2();
});
.select2-container--default .select2-selection--multiple:before {
content: ' ';
display: block;
position: absolute;
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
right: 6px;
margin-left: -4px;
margin-top: -2px;top: 50%;
width: 0;cursor: pointer
}
.select2-container--open .select2-selection--multiple:before {
content: ' ';
display: block;
position: absolute;
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px;
height: 0;
right: 6px;
margin-left: -4px;
margin-top: -2px;top: 50%;
width: 0;cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select multiple id="select1" 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>
Source: https://github.com/select2/select2/issues/167#issuecomment-322461384