javascript - ajax 调用后追加所选内容

Question

我有一个 Select 2 下拉搜索功能。我正在尝试加载 ajax 调用的结果作为选定/默认值。我不确定我哪里出错了？我需要在这里更改什么语法，以便当我单击模式时它会显示预设的结果。

$(document).ready(function() {
  $('.editApptModal-button').click(function() {
    var appointmentID = $(this).attr('data-appointmentID');

    $('#editApptModal').find('input[name="appointmentID"]').val(appointmentID);
    $.ajax({
      type: 'ajax',
      method: 'get',
      url: '/ajax',
      async: false,
      dataType: 'json',
      success: function(response) {

        console.log(JSON.stringify(response));

        $.each(response.employees.data, function(key, value) {
          $('select').append($("<option selected></option>",
            //<HERE Selected is not working. 
            //If I remove selected results load in dropdown
            {
              value: value.id,
              text: value.name
            }));
        });

        $('#editApptModal').modal('show');
      },
      error: function(response) {
        alert('Could not displaying data' + response);
      }
    });

    $('#editApptModal').modal('show');
  });
});

<select multiple="multiple" name="employees[]" id="form-field-select-4" class="form-control search-select"> 
<option selected value=""></option>

Answer 1

首先，您应该尝试仅追加一次，因为这是一项繁重的操作。 通过直接设置属性似乎可以在这里工作。

var datas = [
  {value: 'toto', text: 'Toto'},
  {value: 'titi', text: 'Titi'}
];

var options = '';
$.each(datas, function(key, value) {
  options += '<option selected>'+value.text+'</option>';
});

$('#select').append(options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select multiple id="select"></select>