Selectpicker Is Not Working with Refresh with Drop-Down List

I am using the below code, and my problem is that when I select the first time then the location list is not loading. When I select the second item then the first item in the sublist gets populated. If I select third then the second subitem gets populated.

I'm sure I'm making a silly mistake somewhere.

<div class="form-group">
  <div class="row">
    <div class="col-xs-12 col-sm-5 col-md-5">
      <label for="">SELECT CLIENT</label>
      <select type="search" id="myarray" class="select2-select req selectpicker form-control" data-required="1" data-max-options="1" data-live-search="true" multiple="" name="myarray[]" title="Select a Client">
        <?php echo $Clients; ?>
      </select>
    </div>
  </div>
</div>

<script>
  jQuery(".select2-select").change(function() {
    var selected = $(this).val();
    $(".selectpicker").selectpicker();
    $.ajax({
      url: "<?php echo base_url(); ?>login/getDataFromLocation",
      data: {
        type: 'select',
        selected: selected
      },
      type: 'post',
      success: function(output) {
        if (output) {
          //$('#append').append(output);
          $(".selectpicker").selectpicker();
          $('#multiple').selectpicker('refresh').empty().append(output);
        }
      }
    });

  });
</script>

<div class="form-group">
  <div class="row">
    <div class="form-group col-md-5">
      <label for="multiple">LOCATION</label>
      <select id="multiple" class="form-control req selectpicker select2-select" data-required="1" name="Location[]" title="Select a Location" multiple></select>
    </div>
  </div>
</div>

Problem has been resolved and the problem was refreshing the value from list.

$("#creatives").selectpicker('refresh').empty().append(output).selectpicker('refresh').trigger('change');

Used .trigger('change') Thanks a lot for everyone's input here.