我的select2工作得很好,我只有一个小虫子,选择框中的箭头向下图标没有显示,你知道为什么这些人吗?
这让用户有点困惑我尝试找到这个bug,但是我无法解决这个错误,请问各位帮帮我吧?代码在这里不起作用,但它在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>
您已使用多选下拉列表和已使用的插件(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;
}
对于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;
}
$("#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>
未显示,因为您在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>
$(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>
资料来源:https://github.com/select2/select2/issues/167#issuecomment-322461384