1.gitHub:https://github.com/select2/select2
2.doc:https://select2.org/
3.引入文件
<link rel="stylesheet" type="text/css" href="../../libs/select2-4.0.2/dist/css/select2.min.css">
<script type="text/javascript" src="../libs/select2-4.0.2/dist/js/select2.full.min.js"></script>
4.example
css:(自定义)
.series-container .select2-container--default .select2-selection--single .select2-selection__rendered{
height: 35px;
line-height: 35px;
}
.select2.select2-container.select2-container--default,
.series-container .select2-container--default .select2-selection--single,
.series-container .select2-container--default .select2-selection--single .select2-selection__arrow,
.series-container .shopName_selected{
height: 35px
}
html:
<select id="performace-categories" class="shopName_selected" data-placeholder="请选择绩效名称" style=" 100%;height:35px;"></select>
js:
$("#performace-categories").select2({
data:[{'id':1,'text':'一个月'},{'id':2,'text':'两个月'},{'id':3,'text':'三个月'}],
allowClear:true
})
效果
其它功能参见API文档