使用来自ajax调用的数据初始化select2

Question

我有一个带有 GET 方法的 API

sewatanah/getprovinsi

它将返回：

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

可以根据

q

属性的子串，过滤URL中是否有

text

参数。

例如API

sewatanah/getprovinsi?q=ac

会返回：

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

我像这样实现

select2

库：

$('.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 {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/select2.min.js"></script>

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

问题是我不能用这个初始化值：

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

我知道这是不可能完成的，因为仅从 Ajax 调用中检索数据，而

.val('11')

没有调用 Ajax。我该如何解决这个问题？

Answer 1

你只需要添加带有 selected="selected" 属性的选项标签。

  <select class="provinsi">
    <option value="31" selected="selected">DKI JAKARTA</option>
  </select>

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

没必要。

$('.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 {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/select2.min.js"></script>

<div>
  <label>Provinsi</label>
  <select class="provinsi">
    <option value="31" selected="selected">DKI JAKARTA</option>
  </select>
</div>

Answer 2

我还没有找到解决方案，但我转而使用另一个解决方案，使用来自 Ajax 调用的预定义数据，然后初始化值。

$.ajax({
  url: 'https://ip.jordkris.com/api/sewatanah/getprovinsi',
  success: (res) => {
    $('.provinsi').append($.map(res, (obj) => {
      return $('<option>').val(obj.id).text(obj.nama);
    }));
    $('.provinsi').select2();
    $('.provinsi').val('31').trigger('change');
  },
  error: (err) => {
    console.error(err);
  }
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

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

Answer 3

您不能将

select

的值更改为不是

option

的值。你需要确保你想要的

option

首先存在，然后你可以设置你的值。在下面修改后的代码片段中，我检查了

select

是否具有您想要的

option

，如果没有，那么它会在我们更改值之前创建。我可能误解了这个问题，请告诉我这是否有帮助以及您可能需要哪些进一步的更改/信息。

$('.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
  }
});

let v = {key: 11, text: 'ACEH'};
let provinsi = $('.provinsi');
if (!provinsi.find(`option[value=${v.key}]`).length) {
    provinsi.append(`<option value=${v.key}>${v.text}</option>`)
    provinsi.val('11').trigger('change');
}

.provinsi {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/select2.min.js"></script>

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