select2 占位符显示组文本和子项

Question

我想知道是否可以将分组数据作为输入，在选择后在文本显示中添加分组文本值。

让我解释一下：

我的输入数据（ajax Api 请求）：

    {
      "text": "France",
      "children" : [
        {
            "id": 1,
            "text": "Paris"
        },
        {
            "id": 2,
            "text": "Lyon"
        }
      ]
    },
    {
      "text": "Spain",
      "children" : [
        {
            "id": 3,
            "text": "Barcelona"
        }
      ]
    }

使用此配置：

<select class="js-available-states js-states form-control" style="width: 150px"><option></option></select>

    $('.js-available-projects').select2({
        placeholder: {
            id: '1',
            text: 'Select an option'
          },
        ajax: {
          url: '/city',
          type: "GET",
          dataType: 'json',
          processResults: function (data) {
            return {
                results: data
            };
          }
        },
      });

例如，如果我选择“Paris”，则在 select2 框中显示为选择的文本是“Paris”。 是否可以通过添加国家名称来自定义此文本？在我的示例中，它将是“法国 - 巴黎”。

谢谢

Answer 1

您正在搜索templateSelection 选项

let data = [{"text":"France","children":[{"id":1,"text":"Paris"},{"id":2,"text":"Lyon"}]},{"text":"Spain","children":[{"id":3,"text":"Barcelona"}]}]

$('.js-available-states').select2({
  data: data,
  placeholder: 'Select an option',
  templateSelection: function(data) {
    let label = $(data.element).parent('optgroup').attr('label');
    label = label ? label + ' - ' : '';
    return label + data.text;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select class="js-available-states js-states form-control" style="width: 150px"></select>

更新：用于远程数据

$('.js-available-states').select2({
  ajax: {
    url: '/city',
    dataType: 'json',
    processResults: function(data) {
      data = data.map(i => {
        i.children = i.children.map(j => ({ ...j, group: i.text }))
        return i
      })
      return { results: data };
    }
  },
  placeholder: 'Select an option',
  templateSelection: function(data) {
    let label = data.group ? data.group + ' - ' : '';
    return label + data.text;
  }
});