提交更新后 select2 的 select 选项丢失以及如何从数据库设置 selected 值

select option of select2 was missing after submit the update and how to set the selected value from database

我在使用 select2 时遇到了几个问题。首先,当我单击编辑按钮显示编辑模式时,select2 的 select 选项不显示数据库中的值。

这是编辑模式:

代码如下:

<script>
  // Edit
  $('body').on('click', '.edit', function (event) {
    event.preventDefault();
    let id = $(this).attr('id');
    $.get('/admin/diklat/diklats/' + id + '/edit', function (data) {
      $('#code').val(data.data.code);
      $('#name').val(data.data.name);
      $('#lesson_hour').val(data.data.lesson_hour);
      $('#department_id').val(data.data.department_id);
      $('#schema_code').val(data.data.schema_code);
      $('#committee').html('');
      for (let index = 0; index < data.committee.length; index++) {
          $('#committee').append(`<option selected value="${data.committee[index]}">${data.committee[index]}</option>`)
      }
      $('#id').val(data.data.id);
      $('#start_date').val(data.data.start_date);
      $('#end_date').val(data.data.end_date);
      $('#location').val(data.data.location);
      $('#regency_id').val(data.data.regency_id); // this is the part that cannot show its value
      $('#modal-diklat').modal('show');
    })
  });
</script>
<div class="row">
  <div class="col">
   <div class="form-group">
    <label class="form-label" for="regency_id">Kabupaten</label>
    <select id="regency_id" name="regency_id" class="select2 form-control">
      <option value=""></option>
      @foreach ($regencys as $regency)
      <option value="{{$regency->id}}">{{$regency->name}}</option>
      @endforeach
    </select>
   </div>
  </div>
</div>

第二个问题是,当我点击更新按钮时,select2 的 select 选项丢失了。

此处:

当更新过程完成后(我想在不重新加载页面的情况下再添加一个数据),它仍然像上图所示那样丢失。但是,当我重新加载页面时, 它像正常一样重新出现。

有人可以帮我解决这个问题吗?我一直在寻找解决方案,但不幸的是我仍然无法解决

已解决。对于第一个问题,只需要定义类似

的东西
$('select').select2();

而第二期只需添加.trigger("change");

示例:

$('#regency_id').val(data.data.regency_id).trigger('change');

注意:OP 在问题部分提供答案。