select2 使用

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="width: 100%;height:35px;"></select>

　　js:

　　　　$("#performace-categories").select2({
　　　　　　data:[{'id':1,'text':'一个月'},{'id':2,'text':'两个月'},{'id':3,'text':'三个月'}],
　　　　　　allowClear:true
　　　　})

　　效果

　　

　　其它功能参见API文档

 

 

　　　　

转载于:https://www.cnblogs.com/adolfvicto/p/7724479.html