Tengo un select2 que toma algunos elementos, pero quiero hacer una especie de carga lenta de más elementos, haciendo clic en el botón más. Cuando el usuario presiona el botón más, realizará un nuevo ajax que agregará más opciones para seleccionar2. Pero el problema es que no he encontrado ninguna forma de agregar nuevos elementos a la selección mientras está abierta. Dejé como ejemplo el append usando una opción.

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.6/select2-bootstrap.min.css" rel="stylesheet" /> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <select id="select-test" style="width: 300px"></select>

 var formatTemplate, url = 'https://620aa88092946600171c5bf0.mockapi.io/test/v1/a'; formatTemplate = function(item) { var $state; if (item.id === 3) { $state = $('<span>Text: ' + item.text + '<button>+</button>' + '</span>'); } else { $state = $('<span>Text: ' + item.text + '</span>'); } return $state; }; $('#select-test').select2({ ajax: { url: url, type: 'GET', dataType: 'json', processResults: function(results) { return { results: results } }, }, templateResult: formatTemplate }); async function asyncCheck() { await new Promise((resolve, reject) => { setTimeout(function() { $('li').on('mouseup', function(event) { var $button = $(this).find('button'); if (event.target === $button[0]) { var newOption = new Option('Text: New', 9, false, false); event.stopPropagation(); $('#select-test').append(newOption); } }); $('.select2-dropdown--below').css('display', ''); resolve(); }, 700); }); } $('#select-test').on('select2:open', function() { $('.select2-dropdown--below').css('display', 'none'); asyncCheck(); });