select2 常规使用

select2 搭配jquery 可以实现 单选 多选 以及模糊搜索等

引入：

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

在html中使用

<select id="sel" multiple="multiple" class="form-control select-menu">
</select>

在js中注册

$('#sel_overview').select2({
    allowClear: true,                       //全部清除按钮
    tags: true,                             // 根据搜索框创建option，默认false
    maximumSelectionLength: 6,              // 最多能够选择的个数
    multiple: true,                         // 多选，默认false
    data: initdata,                         // 下拉框绑定的数据
    placeholder: '请添加或选择语言'           // 占位提示符
    maximumInputLength: 20,                 // 允许搜索长度  
    minimumResultsForSearch: 20,            // 至少20个结果的时候显示搜索  
    minimumResultsForSearch: Infinity,      // 永久隐藏搜索框  
    selectOnClose: true,                    // 结果显示高亮  
    closeOnSelect: false,                   // select选中关闭下拉框  
    separator: ",",                         // 分隔符  
})

data数据处理

select2有专属的data数据格式，格式正确才能渲染到下拉框上并且支持设置默认值以及置空等。

id 和 text 为必填项，可由后端或前端处理数据结构。

{
  "results": [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
  ],
  "pagination": {
    "more": true
  }
}

取值：

$("#sel").val();  
$("#sel").select2("val");  
$("#sel").select2('data').text ;

设置默认值：

//置空  
$('#sel').val(null).trigger("change"); 
// 单选情况设值
$("#sel").val("初始值").trigger("change");
// 设值 可设值多选， trigger不可省略
$('#sel').val(['1', '2']).trigger('change')

select2常用事件：

//选中  
$eventSelect.on('select2:select', function () { })  

//取消选中  
$eventSelect.on('select2:unselect', function () { })  

//移除  
$eventSelect.on("removed", function () { })  

// 下拉框打开事件
$eventSelect.on("select2:open",function(e){});

// 下拉框关闭事件
$eventSelect.on("select2-close",function(e){});