title: How to set multiple selected values for multi-select picker?
body: <p>I have the following multi-select picker which is populated with data. I want to be able to set multiple selected values that I get from the database. </p>
  
  <pre><code> &lt;div class="form-group col-md-6 col-lg-6 col-sm-6"&gt;
       &lt;label&gt;Choose Skills&lt;/label&gt;
       &lt;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"&gt;&lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the code that I use to populate the multi-select picker:</p>
  
  <pre><code>$('.selectpicker').selectpicker();
  
  $.ajax({
      type: "POST",
      url: '/TutorSkills/FetchTutorSkills',
      success: function (data) {
          //console.dir(data);
          for (var i = 0; i &lt; data.length; i++) {
              $("#DDLSkills").append('&lt;option data-tokens="' + data[i].Skill.SkillName + '" value="' + data[i].Skill.Id + '"&gt;' + data[i].Skill.SkillName + '&lt;/option&gt;');
          }
          $("#DDLSkills").selectpicker("refresh");
      },
      error: function (error) {
          alert('Failed to get the logged-in tutor skills!');
      }
  })
  </code></pre>
  
  <p>However, I want to be able to set selected values that I get from the database but the code below only sets the last value that I get from the database.</p>
  
  <pre><code>$.ajax({
      type: "POST",
      url: '/ClassSkills/GetClassSelectedSkills',
      data: { 'id': selectedEvent.id },
      success: function (data) {
          console.dir(data);
          for (var i = 0; i &lt; data.length; i++) {
              $('.selectpicker').selectpicker('val', [data[i].Skill.Id]);
          }
          $('.DDLSkills').selectpicker('refresh')
  
      },
      error: function (error) {
          alert('Failed');
      }
  })
  </code></pre>
  
  <p>Thank you</p>