Hemos encontrado varios ejemplos de la opción seleccionada de relleno previo para Select2, sin embargo, ninguno de ellos que pudimos encontrar trata con la lista formateada y las opciones de selección. Tenemos un violín JS en https://jsfiddle.net/gpsx62de/26/ que ilustra el problema. En ese violín, puede escribir y L o lo que sea en la búsqueda de selección y se devuelven los datos, se formatea la lista y, si selecciona algo, se formatea la selección.
Sin embargo, si hace clic en el botón en ese JS Fiddle que pretende simular la prepoblación por https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced -ajax-select2 se devuelven los datos (puede descomentar el archivo console.log para verlo), pero la selección formateada se muestra indefinida para los valores previstos. ¿Alguien sabe de una manera de obtener los valores formateados para que los datos rellenados previamente se muestren correctamente?
// 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? *** } }); });El problema, en https://jsfiddle.net/gpsx62de/26/ es con el
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>`); } El objeto obj solo contiene los datos de la clase Option , por lo que:
id: "1", selected: true, text: "Leanne Graham", title: ""Entonces, debe encontrar una manera de pasar "data.email" al método "format_selection"
EDITAR
Esta podría ser una solución.
$('#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 }); //clickY
function format_selection(obj) { return $(`<div><b>${obj.element.dataset.name}</b></div><div>(${obj.element.dataset.email})</div>`); }Este es el violín https://jsfiddle.net/947jngtu/
El problema está en la función format_selection. El formato del objeto que recibe depende de cómo fue creado. Cuando usa una new Option(text, value) , recibe solo las propiedades de este objeto de opción, no su objeto original que contiene toda la información del usuario.
Una solución alternativa es verificar cualquiera de los valores posibles en la función:
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>`); }Para que esto funcione, debe agregar la propiedad de en su objeto de opción:
var option = new Option(data.name, data.id, true, true); option.email = data.email; $('#sel').append(option).trigger('change');