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>

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>

在ajax调用后追加选中

2 个答案: