如何為多選選取器設置多個選定值？

Question

我有以下填充有數據的多選選擇器。 我希望能夠設置從數據庫中獲得的多個選定值。

 <div class="form-group col-md-6 col-lg-6 col-sm-6">
     <label>Choose Skills</label>
     <select id="DDLSkills" name="selValue" data-live-search="true" data-style="btn-default form-control" class="selectpicker form-control" data-size="5" multiple data-max-options="2"></select>
</div>

這是我用來填充多選選擇器的代碼：

$('.selectpicker').selectpicker();

$.ajax({
    type: "POST",
    url: '/TutorSkills/FetchTutorSkills',
    success: function (data) {
        //console.dir(data);
        for (var i = 0; i < data.length; i++) {
            $("#DDLSkills").append('<option data-tokens="' + data[i].Skill.SkillName + '" value="' + data[i].Skill.Id + '">' + data[i].Skill.SkillName + '</option>');
        }
        $("#DDLSkills").selectpicker("refresh");
    },
    error: function (error) {
        alert('Failed to get the logged-in tutor skills!');
    }
})

但是，我希望能夠設置從數據庫中獲取的選定值，但是下面的代碼僅設置了從數據庫中獲取的最后一個值。

$.ajax({
    type: "POST",
    url: '/ClassSkills/GetClassSelectedSkills',
    data: { 'id': selectedEvent.id },
    success: function (data) {
        console.dir(data);
        for (var i = 0; i < data.length; i++) {
            $('.selectpicker').selectpicker('val', [data[i].Skill.Id]);
        }
        $('.DDLSkills').selectpicker('refresh')

    },
    error: function (error) {
        alert('Failed');
    }
})

謝謝

Answer 1

嘗試這項工作

$.ajax({
  type: "POST",
  url: '/ClassSkills/GetClassSelectedSkills',
  data: { 'id': selectedEvent.id },
  success: function (data) {
      console.dir(data);
      let optArr = [];
      for (var i = 0; i < data.length; i++) {
        optArr.push(data[i].Skill.Id);

      }
      $('.selectpicker').selectpicker('val', optArr);
      $('.DDLSkills').selectpicker('refresh')

  },
  error: function (error) {
      alert('Failed');
  }
})