浅谈select2的使用

前言

select2相比较以往的select下拉框比起来，确实非常方便，它提供了一个可自定义的选择框，支持搜索，标记，远程数据集，无限滚动以及许多其他高度使用的选项。

select2的安装详情请看官方文档介绍的配置方式：https://select2.org/getting-started/installation

支持的类型

传统的 <select> 框中包含任意数量的<option>元素。其中每个都在下拉菜单中呈现为一个选项。Select2在其上初始化时保留此行为<select>包含的元素 <option> 元素，将它们转换为内部JSON表示：

{
  "id": "value attribute" || "option text",
  "text": "label attribute" || "option text",
  "element": HTMLOptionElement
}

关于分层

每个HTML规范只允许一个级别的嵌套。如果你<optgroup> 在又建立一个 <optgroup>，Select2将无法检测到额外的嵌套级别，因此可能会触发错误。

此外， <optgroup>元素不能被选择。这是HTML规范的限制，并不是Select2可以克服的限制。

如果您希望创建可选选项的真实层次结构，请使用 <option> 而不是 <optgroup>并使用CSS更改样式。请注意，这种方法可能被认为是“不太容易访问”，因为它依赖于CSS样式，而不是语义<optgroup>，以产生效果。

Select2数据格式

Select2可以从数组或远程数据源（AJAX）以编程方式提供的数据作为下拉选项。为了实现这一目标，Select2需要一种非常具体的数据格式。此格式由一个JSON对象组成，该对象包含由键控的对象数组result键。

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

注：

1. 如果您想使用“无限滚动”功能， //响应对象还可能包含分页数据。需要指定pagination键。
2. 提供 selected 和 disabled此数据结构中的选项的属性   默认为不选中，true为选中

将数据转换为所需的格式

由于一般select数据可能会来源与后台，但Select2要求该id,text属性用于唯一标识结果列表中显示的选项。如果使用id（类似pk）以外的属性来唯一标识选项，则需要将旧属性映射到id,text将其传递给Select2之前。如果您无法在服务器上执行此操作，或者您处于无法更改API的情况，则可以在将其传递给Select2之前在JavaScript中执行此操作：

var data = $.map(yourArrayData, function (obj) {
  obj.id = obj.id || obj.pk; // replace pk with your identifier
  obj.text = obj.text || obj.name; // replace name with the property used for the text
  return obj;
});

注：不允许使用空格id或id值0

分组数据

{
  "results": [
    { 
      "text": "Group 1", 
      "children" : [
        {
            "id": 1,
            "text": "Option 1.1"
        },
        {
            "id": 2,
            "text": "Option 1.2"
        }
      ]
    },
    { 
      "text": "Group 2", 
      "children" : [
        {
            "id": 3,
            "text": "Option 2.1"
        },
        {
            "id": 4,
            "text": "Option 2.2"
        }
      ]
    }
  ],
  "pagination": {
    "more": true
  }
}

注：在创建嵌套选项时，仅支持单级嵌套。不保证在所有浏览器和设备上正确显示任何其他嵌套级别。

也可以加载数组数据

var data = [
    {
        id: 0,
        text: 'enhancement'
    },
    {
        id: 1,
        text: 'bug'
    },
    {
        id: 2,
        text: 'duplicate'
    },
    {
        id: 3,
        text: 'invalid'
    },
    {
        id: 4,
        text: 'wontfix'
    }
];

$(".js-example-data-array").select2({
  data: data
})
$(".js-example-data-array-selected").select2({
  data: data
})

选择后强制下拉列表保持打开状态

$('#mySelect2').select2({
  closeOnSelect: false
});

下拉列表

$('#mySelect2').select2({
  dropdownParent: $('#myModal')
});

 默认情况下，Select2会将下拉列表附加到正文的末尾，并将其绝对定位到选择容器的上方或下方。

 如果容器下方没有足够的空间，Select2将显示容器上方的下拉列表，但上面有足够的空间。

可清除的全部已选择的option

$('select').select2({
  placeholder: 'This is my placeholder',
  allowClear: true
});

设置true为时，如果选择了值，则会在选择框中显示清除按钮（“x”图标）。单击清除按钮将清除所选值，有效地将选择框重置回其占位符值。

自动标记到标签中

$(".js-example-tokenizer").select2({
    tags: true,
    tokenSeparators: [',', ' ']
})

Select2支持在用户键入搜索字段时自动添加选项的功能。尝试在下面的搜索字段中输入并输入空格或逗号。

单选选择占位符(无非就是默认值)

<select class="js-example-placeholder-single js-states form-control">
  <option></option>
</select>

默认尝试选择第一个选项。如果您的第一个选项非空，浏览器将显示此选项而不是占位符。

多选占位符

$('select').select2({
  placeholder: {
    id: '-1', // the value of the option
    text: 'Select an option'
  }
});

事件列表

当用户在select2上执行不同操作时，select2会触发不同的事件，用户能够监听这些事件，并且添加相应的处理。 
用户也可以通过.trigger来手动触发这些事件。

事件	描述
change	选择或删除选项时触发。
change.select2	Scoped版本 change。请参阅下文了解更多详情。
select2:closing	在下拉列表关闭之前触发。可以防止此事件。
select2:close	每当下拉菜单关闭时触发。 select2:closing 在此之前被解雇并且可以被阻止。
select2:opening	在下拉列表打开之前触发。可以防止此事件。
select2:open	每次下拉打开时触发。 select2:opening 在此之前被解雇并且可以被阻止。
select2:selecting	在选择结果之前触发。可以防止此事件。
select2:select	选择结果时触发。 select2:selecting 在此之前被解雇并且可以被阻止。
select2:unselecting	在删除选择之前触发。可以防止此事件。
select2:unselect	删除选择时触发。 select2:unselecting 在此之前被解雇并且可以被阻止。
select2:clearing	在清除所有选择之前触发。可以防止此事件。
select2:clear	清除所有选择时触发。 select2:clearing 在此之前被解雇并且可以被阻止。

获取选中值

方法1：

$('#mySelect2').select2('data');

•  

返回一个js对象数组，包括选中项的所有properties/values。

方法2：

$('#mySelect2').find(':selected');