javascript select2 没有显示向下箭头图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46363341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
select2 is not showing arrow down icon
提问by raduken
my select2 is working perfectly, I just have 1 small bug, the arrow down icon from the select box is not showing, do you know guys why?
我的 select2 工作正常，我只有 1 个小错误，选择框中的向下箭头图标没有显示，你们知道为什么吗？
this make the user a bit confuse I tried find the bug, but I could not fix the error, can you please guys help me? the code is not working here but it is working in the jsfiddle link.
这让用户有点困惑我试图找到错误，但我无法修复错误，你们能帮我吗？代码在这里不起作用，但它在 jsfiddle 链接中起作用。
jsfiddle: http://jsfiddle.net/yszv1ob2/
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>回答by Himanshu Gupta
You have used multi-select dropdown and used plugin(Select2) don't add dropdown arrow in multi-select dropdown. So if you want to add dropdown arrow, you have to add some custom CSS like below.
您使用了多选下拉菜单并使用了插件（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;
}
回答by Adam Love
For Select2 version 4.0.5+, this code exactly duplicates the single-select arrow.
对于 Select2 版本 4.0.5+，此代码完全复制了单选箭头。
.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;
}
回答by Elumalai k
$("#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>回答by SilverSurfer
Is not showing because you have multipleattribute in the select tag, just remove it:
未显示，因为您multiple在 select 标签中有属性，只需将其删除：
<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>
回答by Eduardo Cuomo
$(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
来源：https: //github.com/select2/select2/issues/167#issuecomment-322461384
