如何格式化基于 ajax 的 Select2 预填充？

Question

我们发现了几个为 Select2 预填充 selected 选项的示例，但是我们可以找到其中的 none 处理格式化列表和 selection 选项。我们在 https://jsfiddle.net/gpsx62de/26/ 有一个 JS fiddle 说明了这个问题。在 fiddle 中，您可以在 select 搜索中键入和 L 或其他任何内容，然后返回数据，格式化列表，如果您 select 某些东西， select离子被格式化。

但是，如果您单击该 JS Fiddle 中的按钮，该按钮旨在模拟每个 https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2 的预填充，则会返回数据（您可以取消注释 console.log 以查看它)，但格式化的 selection 显示未定义的预期值。有谁知道让预填充数据的格式化值正确显示的方法吗？

// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true); //**** DOES IT MATTER WHAT IS PASSED HERE BECAUSE WE ARE NOT DISPLAY THE OPTION TEXT?? ***
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data //**** THIS DOES NOT SEEM TO SUPPORT FORMATTED SELECTIONS, SO HOW CAN THIS BE DONE? ***
        }
    });
});

Answer 1

https://jsfiddle.net/gpsx62de/26/ 中的问题是

function format_selection(obj) {
  // Just add this to see the obj
  console.log(obj);
  return $(`<div><b>${obj.text}</b></div><div>(${obj.id})</div>`);
}

obj 对象只包含 Option class 数据，所以：

id: "1",
selected: true,
text: "Leanne Graham",
title: ""

所以你必须想办法将“data.email”传递给“format_selection”方法

编辑

这可能是一个解决方案

$('#btn').on('click', function() {
  $.ajax({
    type: 'GET',
    url: 'https://jsonplaceholder.typicode.com/users/1'
  })
  .then(function(data) {
    console.log(data)
    // create the option and append to Select2
    $('#sel').append($('<option />')  // Create new <option> element
      .val(data.id)                   // Set value
      .text(data.name)                // Set textContent
      .prop('selected', true)
      .attr('data-name', data.name)   // Don't know why the .data(key, value) isn't working...
      .attr('data-email', data.email))
      .trigger('change');
  }); //then
}); //click

和

function format_selection(obj) {
  return $(`<div><b>${obj.element.dataset.name}</b></div><div>(${obj.element.dataset.email})</div>`);
}

这是fiddlehttps://jsfiddle.net/947jngtu/

Answer 2

问题出在 format_selection 函数中。它接收的对象的格式取决于它是如何创建的。当您使用 new Option(text, value) 时，它只接收此选项对象的属性，而不是包含所有用户信息的原始对象。

解决方法是检查函数中的任一可能值：

function format_selection(obj) {
let name = obj.name || obj.element.text;
let email = obj.email || obj.element.email;
return $(`<div><b>${name}</b></div><div>(${email})</div>`);
}

为此，您应该在选项对象上附加 de 属性：

    var option = new Option(data.name, data.id, true, true);
    option.email = data.email;
    $('#sel').append(option).trigger('change');

如何格式化基于 ajax 的 Select2 预填充？

How can ajax based Select2 pre-population be formatted?

javascript

ajax

jquery

jquery-select2