Définir les données dans Select2 après insertion avec AJAX

j'utilise le Select2 avec AJAX (le code ci-dessous):

$(".select2-ajax").select2({
        placeholder: "Search user",
        minimumInputLength: 1,
        ajax: {
            url: $('#url-search-client').val(),
            dataType: 'json',
            type: 'post',
            data: function (term, page) {
            return {
                filter: term
            };
            },
            results: function (data, page) {
            return {results: data};
            }
        },
        width : '50%',
        formatInputTooShort: function () {return 'Informe mais caracteres'; },
        formatResult: formatResultSelectAjax, // omitted for brevity, see the source of this page
        formatSelection: formatSelectAjaxValue, // omitted for brevity, see the source of this page
        dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
    });

Eh bien, si le client n'est pas trouvé, l'utilisateur peut utiliser un bouton pour ouvrir un modal et ajouter le nouveau client, est-il possible d'utiliser le retour(json avec id et namae) du nouveau client et de mettre les données (comme nom) dans le select2 comme sélectionné?

$('.btn-form-client').click(function() {
        $.ajax({
            url: $('#frm-client').attr('action'),
            dataType: 'json',
            type: 'post',
            data: $('#frm-client').serialize()
        }).done(function (data) {
            $('#modal-client').modal('hide')
        });
        return false;
    });
9
demandé sur j0k 2013-01-14 06:35:25

2 réponses

à partir de v4.x, select2 n'utilise plus le champ caché input . Au lieu de cela ,vous créer un nouveau Option et l'ajouter à votre select élément:

var newOption = new Option(data.name, data.id, true, true);
$(".select2-ajax").append(newOption).trigger('change');

la combinaison des arguments true et trigger('change') fera en sorte que votre nouveau <option> sera automatiquement sélectionné après avoir été ajouté.

Voir mon codepen pour un exemple de travail complet.

19
répondu alexw 2016-04-14 01:40:25

j'ai réussi à le faire fonctionner. Après avoir posté dans jQuery, j'obtiens un JSON avec les nouvelles données et je mets l'input caché et le select ('.select2-ajax')

$('#client=id').val(data.id);
$('#modal-solicitante').modal('hide'); //This is my
$(".select2-ajax").select2('data', {id: data.id, name: data.name, email: data.email});
1
répondu Tom 2014-03-07 18:11:12