Как обновить список избранного после ответа AJAX

Question

Я заполняю список select из базы данных через ответ AJAx. DOM обновляется правильно, но список по-прежнему пуст, когда я нажимаю на него. Я пробовал другие примеры, но никто не помогал.

HTML:

<div class="modal" id="linkLocationModal" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header bg-success"> 
     <h4 class="modal-title" id="exampleModalLabel">Select New Location</h4> 
     </div> 
     <div class="modal-body"> 
     <form id="addLocationForm" action="/addProviderLocation" class="form-horizontal" method="post"> 
      <div class="form-group"> 
      <label class="col-sm-3 control-label" for="locationSelect">Location</label> 
      <div class="col-sm-6"> 
       <select class="form-control" name="locationSelect" id="locationSelect" required multiple> 
       </select> 
       <input type="text" hidden id="h2providerid" name="h2providerid" value="" /> 
      </div> 
      <div class="col-sm-3"></div> 
      </div> 
      <div class="form-group"> 
      <div class="col-sm-offset-3 col-sm-9"> 
       <button type="submit" class="btn btn-success">Link</button> 
      </div> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <a class="btn btn-default" data-dismiss="modal">Close</a> 
     </div> 
    </div> 
    </div> 
</div> 

JavaScript

$('#linkLocationModal').on('show.bs.modal', function(event) { 
    $.ajax({ 
    type: "POST", 
    url: "/locations" 
    }).done(function(html) { 
    $('#locationSelect').html(''); 

    $.each(html, function(val, text) { 
     $('#locationSelect').append($('<option></option>').val(text.id).html(text.locationname)); 
    }); 
    }); 
}); 

Если я пытаюсь добавить в список выбора вне 'на' события, он работает хорошо. Моя цель, конечно, это динамическое заполнение списка из db.

данных возвращается из Ajax запроса: 2 Второе испытание Расположение 19 Линкольн (Макби St) 16 Гилфорд (Bellemeade Center) 24 Робсон (Гудвин Avenue) 5 Дэвидсон (Grimes Blvd)

DOM :

<select class="form-control" name="locationSelect" id="locationSelect" required="" multiple="" data-fv-field="locationSelect" style="display: none;"><option value="2">Second Test Location</option><option value="19">Lincoln (McBee St)</option><option value="16">Guilford (Bellemeade Center)</option><option value="24">Robeson (Godwin Avenue)</option><option value="5">Davidson (Grimes Blvd)</option><option value="3">Mecklenburg (Charlotte East)</option></select> 

Answer 1

Я, наконец, получил его работу. Используя plugin, мне нужно было перестроить список выбора, используя предоставленные функции. Следующий код был перемещен после цикла для добавления:..

$('#addLocationForm') 
       .find('[name="locationSelect"]') 
       .multiselect({ 
       enableFiltering: true, 
       includeSelectAllOption: true, 
       // Re-validate the multiselect field when it is changed 
       onChange: function (element, checked) { 
        $('#addLocationForm').formValidation('revalidateField', 'locationSelect'); 
       } 
       }) 
       .end();