select2 ajax and preselect

by samu_eyes

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<legend>
  <h5 class="text-semibold">Employees</h5></legend>
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div id="select_employee_div" class="content-group-lg">
      <label class="control-label text-bold">Select Employees *</label>
      <select id="select_employee" class="form-control multi-select-search">
      </select>
    </div>
  </div>
</div>

CSS

select {
  width: 200px
}

JavaScript

arrvar data = [{
  "id": 1,
  "text": "one",
}, {
  "id": 2,
  "text": "two",
}, {
  "id": 3,
  "text": "three",
}, {
  "id": 4,
  "text": "four",
}];
var permit_employee_process = [{"employee_id": 2}, {"employee_id": 3}];

$('.multi-select-search').select2({
  multiple: true,
  data: data,
});

$.ajax({
  type: "POST",
  //url: 'php_files/permit_php_files/permit_employee_process.php',
  url: '/echo/json/',
  dataType: 'JSON',
  data: {
    json: JSON.stringify( permit_employee_process )
   },
  /*data: {
    permit_id: $('#permit_id').val()
  },*/
  success: function(data) {
    var arr = [];
    for (var i in data) {
    	arr.push(data[i].employee_id);
    }
    console.log(arr);
    $("#select_employee").val(arr).trigger('change');
  }
});