时间戳

首页 > 解决方案 > 如何格式化基于 ajax 的 Select2 预填充？

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

问题描述

我们已经找到了几个为 Select2 预填充选定选项的示例，但是我们都找不到处理格式化列表和选择选项的示例。我们在https://jsfiddle.net/gpsx62de/26/有一个 JS fiddle来说明这个问题。在那个小提琴中，您可以在选择搜索中键入和 L 或其他任何内容，然后返回数据，格式化列表，如果您选择某些内容，则格式化选择。

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

// 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? ***
        }
    });
});

标签： javascriptjqueryajaxjquery-select2

解决方案

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

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

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

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

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

推荐阅读