使用 Select2 附加 AJAX 获取的值

Question

我正在尝试使用 Select2 附加 AJAX 获取的值。我的 JavaScript 代码如下所示。

(function($) {  
  $(document).ready(function() {
    $(".volunteer").on("click", function (event) {
      let element_id = event.target.id;
      // Check if select is already loaded
      if (!$(this).has("select").length) {
        var cellEle = $(this);

        // Populate select element
        cellEle.html(`<select class="js-example-basic-multiple" multiple="multiple"></select>`);

        // Initialise select2
        let selectEle = cellEle.children("select").select2({
          ajax: {
            url: "/wordpressbosta/matt/wp-admin/admin-ajax.php",
            dataType: 'json',
            data: function (params) {
              return { 
                q: element_id,
                        action: 'get_data'
                    };
            },
            type: "post",
            processResults: function(data) {              
              var options = [];
              if ( data ) {
                $.each( data, function( index, text ) {
                  options.push( { text: text  } );
                });
              }
              return {
                results: options
              };
            }
          }
        });
      }
    });
  });
})(jQuery)

我得到如下输出。

如果我单击任何值，它不会设置为选择框。值不起作用。

Answer 1

Select2 要求每个选项都有一个id 属性和一个text 属性。在上面的代码中，processResults 方法返回一个对象数组，其中只包含一个text 属性，没有一个id。向processResults 中的数组添加对象时，应包含id：

options.push({ id: id, text: text });

有关此格式的详细信息，请访问https://select2.org/data-sources/formats。根据此页面：

不允许使用空白的ids 或值为0 的id。

您可以使用text 作为唯一的id 值，或者使用index + 1（+ 1 以避免值为0）。在下面的示例代码中使用text。

processResults: function(data) {
  var options = [];
  if (data) {
    $.each(data, function (index, text) {
      options.push({ id: text, text: text });
    });
  }
  return {
    results: options
  };
}