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

Question

I have several problems with select2. First, The select option of select2 is not display the value from database when I click edit button to show an edit modal.

Here's the edit modal:

here's the code:

<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>

Second problem is the select option of select2 is missing when I click the update button.

here:

And when the update process is done (and I want to add one more data without reload the page), it's still missing like the image shown above. But, when I reload the page, it reappears like normal.

Anyone could help me with this issues, please? I've been looking for a solution but unfortunately I still can't solve it

You need to apply select2 after getting and assigning the data like $('select').select2() — PHP Geek, Sep 27 '21 at 03:51
and after add/post data check this link - https://stackoverflow.com/questions/17957040/reset-select2-value-and-show-placeholder — PHP Geek, Sep 27 '21 at 03:55
@PHPGeek oh wow. it works when i add $('select').select2(); the select option is not missing anymore. thank you very much. but I still can't solve the other problem (set the value that get from database) — Khairunnisa Syahfitri, Sep 27 '21 at 04:01
Solved. i just need to add ```.trigger('change');``` just like: ```$('#responsible_person').val(data.data.responsible_person).trigger('change');``` — Khairunnisa Syahfitri, Sep 27 '21 at 04:11
I do not know which version of select2 you are using. but you can use $('#id").select2('val','your value') — PHP Geek, Sep 27 '21 at 04:13

score 0 · Accepted Answer · answered Sep 27 '21 at 04:50

Solved. For the first issue, just need to define something like

$('select').select2();

And for the second issue just need to add .trigger("change");

Example:

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

_{Note: OP provide an answer on question section.}

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

1 Answers1