如何解决基于Ajax数据源的Select2无法设置初始值问题

我有一个GET方法的API接口 sewatanah/getprovinsi，返回的JSON格式如下：

[{"id":"0","text":""},{"id":"11","text":"ACEH"},{"id":"12","text":"SUMATERA UTARA"}, ...]

当URL携带q参数时，接口会根据text属性的子串过滤结果。比如调用sewatanah/getprovinsi?q=ac会返回：

[{"id":"11","text":"ACEH"}, ...]

我用以下代码实现了Select2组件：

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.6-rc.0/dist/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.6-rc.0/dist/js/select2.min.js"></script>

<div>
  <label>Provinsi</label>
  <select class="provinsi"></select>
</div>

CSS代码 #

.provinsi {
  width: 100%;
}

JavaScript代码 #

$('.provinsi').select2({
  allowClear: true,
  placeholder: '-',
  minimumInputLength: 3,
  ajax: {
    dataType: 'json',
    url: 'https://ip.jordkris.com/api/sewatanah/getprovinsi',
    data: function(params) {
      return {
        q: params.term
      };
    },
    processResults: function(data) {
      return {
        results: $.map(data, function(prop) {
          return {
            id: prop.id,
            text: prop.nama
          }
        })
      };
    },
    cache: true
  }
});

$('.provinsi').val('11').trigger('change');

问题：无法通过$('.provinsi').val('11').trigger('change');初始化选中值，因为数据仅通过Ajax请求获取，.val('11')不会触发Ajax请求，该如何解决？

首先注意：原代码的processResults中错误使用了prop.nama，但API返回的字段是text，这会导致下拉选项显示为空，所有方案中都需要修正为prop.text。

方法1：手动添加并初始化 #

Select2需要对应的<option>元素存在才能识别选中状态，可在初始化Select2前手动添加目标选项：

// 先添加要选中的选项
$('.provinsi').append('<option value="11" selected>ACEH</option>');

// 初始化Select2（修正text字段映射）
$('.provinsi').select2({
  allowClear: true,
  placeholder: '-',
  minimumInputLength: 3,
  ajax: {
    dataType: 'json',
    url: 'https://ip.jordkris.com/api/sewatanah/getprovinsi',
    data: function(params) {
      return {
        q: params.term
      };
    },
    processResults: function(data) {
      return {
        results: $.map(data, function(prop) {
          return {
            id: prop.id,
            text: prop.text
          }
        })
      };
    },
    cache: true
  }
});

方法2：通过API获取目标项后手动设置 #

如果不想提前硬编码选项文本，可单独请求API获取目标项信息，再用Select2的data方法设置选中：

// 先初始化Select2（修正text字段映射）
$('.provinsi').select2({
  allowClear: true,
  placeholder: '-',
  minimumInputLength: 3,
  ajax: {
    dataType: 'json',
    url: 'https://ip.jordkris.com/api/sewatanah/getprovinsi',
    data: function(params) {
      return {
        q: params.term
      };
    },
    processResults: function(data) {
      return {
        results: $.map(data, function(prop) {
          return {
            id: prop.id,
            text: prop.text
          }
        })
      };
    },
    cache: true
  }
});

// 请求API获取ID为11的省份信息并设置选中
$.get('https://ip.jordkris.com/api/sewatanah/getprovinsi', function(data) {
  const targetItem = data.find(item => item.id === '11');
  if (targetItem) {
    $('.provinsi').select2('data', [{id: targetItem.id, text: targetItem.text}]);
  }
});

方法3：修改API支持ID查询（若有权限） #

如果可以修改API，让其支持通过id参数直接返回指定项（如sewatanah/getprovinsi?id=11），可更高效地初始化：

// 请求指定ID的省份数据
$.get('https://ip.jordkris.com/api/sewatanah/getprovinsi?id=11', function(data) {
  if (data.length > 0) {
    // 添加选项并初始化Select2
    $('.provinsi').append(`<option value="${data[0].id}" selected>${data[0].text}</option>`);
    $('.provinsi').select2({
      // 保持原配置，修正text字段映射
      allowClear: true,
      placeholder: '-',
      minimumInputLength: 3,
      ajax: {
        dataType: 'json',
        url: 'https://ip.jordkris.com/api/sewatanah/getprovinsi',
        data: function(params) {
          return {
            q: params.term
          };
        },
        processResults: function(data) {
          return {
            results: $.map(data, function(prop) {
              return {
                id: prop.id,
                text: prop.text
              }
            })
          };
        },
        cache: true
      }
    });
  }
});

内容的提问来源于stack exchange，提问作者Jordy