select2不显示箭头向下图标

我的select2工作正常，我只有1个小错误，从选择框中的箭头向下图标没有显示，你知道为什么吗？select2不显示箭头向下图标

Example

这使用户有点迷惑我试着找到了这个错误，但我无法修复错误，可以请你们帮帮我吗？代码在这里不起作用，但它在jsfiddle链接中工作。

$("#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>

来源

2017-09-22 Raduken

您已使用多选下拉菜单并使用插件（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; 
}

来源

2017-09-22 11:32:35

谢谢你，正确的答案。干杯。在版本4+中使用 – Raduken

，将select2-choices类替换为select2-selection__rendered – Ross

$("#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>

来源

2017-09-22 11:12:36

选择{ 背景：网址（../ IMG/arrow.png）无重复权利中心; 外观：无; -moz-appearance：none; -webkit-appearance：none; width：90px; text-indent：0.01px; text-overflow：“”; } –

没有展示，因为您在选择标签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>

来源

2017-09-22 11:15:58 SilverSurfer

谢谢你的回答，但我需要选择的项目显示了解，所以我不能删除多个像这样：https://imgur.com/a/ipttz – Raduken

select2不显示箭头向下图标

回答

相关问题