Установить начальное значение select2 из строки ajax

Question

Я использую select2 v. 4.0.3

У меня есть два поля в моей форме, которые когда-то показывали, ajax-вызов делается для заполнения данных формы.

Когда вызов ajax сделан и в случае успеха, я хочу заполнить поля select2 на основе значений из "left_options" и "right_options", которые являются двумя полями в моей базе данных, которые содержат целочисленные строки, такие как: 25,0 или 3,41,4

 //get all the record info and fillfields if in update mode
 $.ajax({
 url: "ajax_quick_get_value.php",
 type: "get",
 data: {
     table: 'invoice_hearing_aids',
     field: 'id',
     field_equals: $('#modal_form_invoice_hearingaids #hearing_aids_id').val()
 },
 dataType: 'json',
 success: function (response) {
//response here if data response

if (response) {

 //loop through the data and fill form fields based on id's
    $.each(response, function (index, value) {
        if(index != 'left_options' || index != 'right_options') {
            $('#modal_form_invoice_hearingaids #hearing_aids_' + index).val(value);
        }

        if(index == 'left_options') {
            var left_current_string = value;

            //will throw an error if it's null, so check first
            if (left_current_string != null) {
                var left_array = new Array();
                var left_array = left_current_string.split(',');

                $('#modal_form_invoice_hearingaids #hearing_aids_left_options').select2('val', left_array);
            }

        }

        if(index == 'right_options') {
            var right_current_string = value;

            //will throw an error if it's null, so check first
            if (right_current_string != null) {
                var right_array = new Array();
                var right_array = right_current_string.split(',');

                $('#modal_form_invoice_hearingaids #hearing_aids_right_options').select2('val', right_array);
            }
        }

    });

Я могу подтвердить, что данные JSON, возвращаемые из моего вызова ajax, имеют значения как left_options, так и right_options, разделенные запятой.

Только первое значение из строки опций вводится в поля select2. Все остальное после этого не заселено.

 $('#modal_form_invoice_hearingaids #hearing_aids_left_options').select2('val', left_array)

Я думаю, что проблема в приведенном выше коде как-то? То же самое для кода right_options.

Я чувствую, что это сработало, но внезапно остановилось по какой-то причине. Я использую Chrome.

Вот как я динамически заполняю свой select2 опциями (просто показывая здесь параметр right_options):

 <div class="form-group">
                <label class="control-label"></label>
                <select id="hearing_aids_right_options"  name="right_options[]" class="form-control hearing_aid_options" multiple style="width: 100%">
                <?php 
if($company->find_hearing_aid_options()) { 
$options = $company->hearing_aid_options(); 
foreach ($options as $option) { 
    echo '<option value="' .  $option->id . '">' .  $option->name . '</option>';
     };
};
 ?>
 </select>

Я не уверен, если мне нужно предоставить больше кода, но я могу. Благодарю.

Answer 1

Вам необходимо правильно построить данные на стороне сервера, чтобы он возвращал массив key:value пары внутри массива с именем items[], Более того, select2 У него есть свои мысли относительно обработки данных при успешном выполнении ajax-запроса, и поэтому вам следует использовать реализацию библиотек, например:

$('select').select2({
     ajax: {
        url: "ajax_quick_get_value.php",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, params) {
          params.page = params.page || 1;

          return {
            results: data.items,
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 1,
      templateResult: formatItems, 
      templateSelection: formatItemSelection
    });
});

Теперь вам нужно беспокоиться только о двух функциях formatItems а также formatItemSelection,

Вы можете просто реализовать что-то простое для них, например:

function formatItems(item) {
    return item.name;
}

а также

function formatItemSelection (item) {
    return item.name;
}

Вот и все. Теперь вам просто нужно убедиться, что на стороне сервера он возвращен правильно таким образом, что это правильный ответ JSON, как описано выше:

return json_encode([
    'items' => $myItemsArray
]);

Тогда вам просто нужно вернуть массив объектов, которые имеют id собственность и name собственность на минимуме.

Answer 2

Это сработало для меня, изменив код на:

 $('#modal_form_invoice_hearingaids #hearing_aids_left_options').val(left_array).trigger("change");