web-dev-qa-db-ja.com

AJAX）を使用して挿入した後、Select2にデータを設定します

私はSelect2をAJAX（以下のコード）で使用しています：

$(".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
    });

クライアントが見つからない場合、ユーザーはボタンを使用してモーダルを開き、新しいクライアントを追加できます。新しいクライアントのreturn（json with idとnamae）を使用して、データ（名前など）をselect2に入れることができます。選択したとおりですか？

$('.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;
    });
jqueryajaxjquery-select2
10
Tommy

V4.x以降、select2は非表示のinputフィールドを使用しなくなりました。代わりに、 新しいOption を作成し、それをselect要素に追加します。

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

true引数とtrigger('change')の組み合わせにより、新しい_<option>_が追加後に自動的に選択されます。

完全な実例については、my codepen を参照してください。

21
alexw

私はなんとかそれを機能させることができました。 jQueryでPOST）の後、新しいデータを含むJSONを取得し、非表示の入力と選択（ '.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
Tom