Jquery 设置从ajax字符串中选择2的初始值

我用的是select2v。4.0.3

我的表单上有两个字段，一旦显示，就会调用ajax来填充表单数据

当ajax调用成功时，我希望根据“left_options”和“right_options”中的值填充select2框，这两个字段在我的数据库中包含如下整数字符串：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);
            }
        }

    });

我能够确认从ajax调用返回的JSON数据中包含左\选项和右\选项的值，它们之间用逗号分隔

只有选项字符串中的第一个值被填充到select2框中。之后的所有内容都没有填充

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

我想问题出在上面的代码里了？正确的选项代码也是如此

我觉得这样做有效，但由于某种原因突然停止了。我用铬

下面是我如何用选项动态填充select2（仅在此处显示正确的选项）：

---

我不确定是否需要提供更多代码，但我可以。谢谢。

您需要在服务器端以正确的方式构造数据，以便它在名为

items[]

的数组中返回一个

key:value

对数组。此外，

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
    });
});

及

就这样。现在，您只需确保在服务器端正确返回，并确保它是正确的JSON响应，如上所述：

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

---

然后，您只需要返回一个对象数组，该数组至少具有

id

属性和

name

属性。

您需要在服务器端以正确的方式构造数据，以便它在名为

项[]的数组中返回一个
键：值
对的数组。此外，
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
    });
});

及

就这样。现在，您只需确保在服务器端正确返回，并确保它是正确的JSON响应，如上所述：

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

然后，您只需返回一个对象数组，该数组至少具有
id
属性和
name
属性。
通过将代码更改为：

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

通过将代码更改为：

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

所以在我的服务器上，我必须有一个数组，该数组具有左\u选项和右\u选项字段的id和名称？如果我更改选项的名称怎么办？例如，我决定以后再叫它别的名字。我必须检查所有记录并重命名json记录的“name”部分，对吗？现在，我只是将id作为逗号分隔的字符串存储在left\u选项和Right\u选项中。然后，我尝试根据这些ID和从数据库动态加载的选项填充select2。@chris.cavage您可以在
formatItems
和
formatItemSelection
函数中选择要使用的任何内容。为了简单起见，我选择了这个名字。但是你将来也需要维护它，在我的服务器上，我必须有一个数组，其中包含左选项和右选项字段的id和名称？如果我更改选项的名称怎么办？例如，我决定以后再叫它别的名字。我必须检查所有记录并重命名json记录的“name”部分，对吗？现在，我只是将id作为逗号分隔的字符串存储在left\u选项和Right\u选项中。然后，我尝试根据这些ID和从数据库动态加载的选项填充select2。@chris.cavage您可以在
formatItems
和
formatItemSelection
函数中选择要使用的任何内容。为了简单起见，我选择了这个名字。但你也需要在未来保持这一点