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文档

 

 

    

posted @ 2017-10-24 16:54  adolfvicto  阅读(3685)  评论(0编辑  收藏  举报