Select2 数据格式

Select2可以从阵列或远程数据源(AJAX)中以编程方式提供的数据作为下拉选项。为了实现此目的,Select2期望使用非常特定的数据格式。此格式由一个JSON对象组成,其中包含由results 键。

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

Select2要求每个对象都包含idtext 属性。与数据对象一起传递的其他参数将包含在Select2公开的数据对象上。

如果您想使用“无限滚动”功能,则响应对象还可能包含分页数据。这应该在pagination 键。

选定和禁用的选项

您也可以提供selecteddisabled 此数据结构中选项的属性。例如:

{
  "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,则可以在将JavaScript传递给Select2之前使用JavaScript进行操作:

var data = $.map(yourArrayData, function (obj) {
  obj.id = obj.id || obj.pk; // 用您的标识符替换pk

  return obj;
});

产生 text 属性

id 属性一样,Select2要求将应为选项显示的文本存储在 text 属性中。您可以使用以下JavaScript从任何现有属性映射此属性:

var data = $.map(yourArrayData, function (obj) {
  obj.text = obj.text || obj.name; // 将name替换为用于文本的属性

  return obj;
});

自动串铸

因为该value 属性在 <select> 标签必须是字符串,并且Select2 valueid 数据对象的 id 属性生成属性,每个数据对象上的属性也必须是字符串。

Select2将尝试将非字符串的任何内容转换为字符串,这在大多数情况下都适用,但是建议您id 提前将显式转换为字符串。

空白 id 或一个 id 具有的值 0 是不允许的。

分组数据

在何时生成选项 <optgroup> 部分,选项应嵌套在 children 每个组对象的键。组的标签应指定为 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> 创建嵌套选项时,仅支持单层嵌套。不能保证任何其他级别的嵌套都可以在所有浏览器和设备上正确显示。