アヤックスコールの後にアペンドを選択

Question

私はドロップダウン検索機能を持っています。選択された/デフォルト値として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>

Answer 2

あなたが完了した後にリフレッシュコマンドを発行する必要があります。ここで私のプロジェクトの一つのために同じことをやっているそれの素早いスニペット。 TransportRecord_TransportCarrierIDは私のselect要素のIDです。

   $('#TransportRecord_TransportCarrierID').empty(); 
       $.each(jsonResponse, function (key, item) { 
        var option = $('<option selected>').text(item.Text).val(item.Value); 
        $('#TransportRecord_TransportCarrierID').append(option); 
       }); 
       $('#TransportRecord_TransportCarrierID').selectpicker('refresh'); 

Htmlの

<select class="form-control selectpicker" data-live-search="true" data-style="btn-defaultWhite" multiple="multiple" id="TransportRecord_TransportCarrierID" name="TransportRecord.TransportCarrierID">//your initial options</select>