Select2 的数据格式

Select2 可以将通过数组或远程数据源（AJAX）编程提供的数据渲染为下拉选项。为了实现这一点，Select2 需要一种非常特定的数据格式。该格式由一个 JSON 对象组成，其中包含一个以results键下列出。

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

Select2 要求每个对象必须包含一个id和一个text属性。传递给数据对象时，额外的参数会被包含在 Select2 暴露出来的数据对象中。

如果你想使用“无限滚动”功能，响应对象还可以包含分页数据。这应当在pagination键下列出。

已选和禁用选项

你也可以在该数据结构中提供选项的selected和disabled属性。例如：

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

在这种情况下，选项 2 将被预先选中，而选项 3 将会是禁用的.

将数据转换为所需格式

生成id属性

Select2 要求使用id属性来唯一标识结果列表中显示的选项。如果你使用的属性不是id（比如pk）来唯一标识一个选项，你需要将你的旧属性映射到id后再传给 Select2。

如果你无法在服务器上完成此操作，或者处于 API 无法更改的情况下，可以在将数据传给 Select2 前在 JavaScript 中进行处理：

var data = $.map(yourArrayData, function (obj) {
  obj.id = obj.id || obj.pk; // replace pk with your identifier

  return obj;
});

生成text属性

就像id属性一样，Select2 要求选项应显示的文本必须存储在text属性中。你可以使用以下 JavaScript 将此属性从任意已有属性映射过来：

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

  return obj;
});

自动字符串转换

因为value标签上的<select>属性必须是字符串类型，且 Select2 是根据数据对象的value属性生成该属性，因此每个数据对象上的id属性也必须是字符串类型。idSelect2 会尝试将不是字符串的内容转换成字符串，在大多数情况下这是有效的，但建议你提前显式地将你的

Select2 will attempt to convert anything that is not a string to a string, which will work for most situations, but it is recommended to explicitly convert your id转换成字符串。

不允许出现空白的id或值为id的0内容。

分组数据

当需要生成分节的选项时，选项应该嵌套在每组对象的<optgroup>键下。该组的标签应指定为对应数据对象上的children key of each group object. The label for the group should be specified as the text属性。

{
  "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
  }
}

因为 Select2 在创建嵌套选项时会生成一个<optgroup>，所以只支持单层嵌套。额外层级的嵌套不能保证在所有浏览器和设备上都能正确显示。