web-dev-qa-db-ja.com

Select2：初期化後にデータを設定する方法？

Select2を初期化した後、データの配列を設定する必要があります。だから私はこのようなものを作りたい：

var select = $('#select').select2({});
select.data([
  {id: 1, text: 'value1'},
  {id: 1, text: 'value1'}
]);

しかし、次のエラーが表示されます。

Select2の要素にアタッチされている場合、オプション 'data'は許可されません。

私のHTML：

<select id="select" class="chzn-select"></select>

Select要素の代わりに何を使うべきですか？

検索用のアイテムのソースを設定する必要があります

javascriptjqueryjquery-select2
34
Erik

オンロード時：

$.each(data, function(index, value) {
  $('#selectId').append(
    '<option value="' + data[index].id + '">' + data[index].value1 + '</option>'
  );
});
21
PSR

を作る <input type="hidden">要素とselect2をそれにバインドします。通常の選択ボックスで.select2を使用しても、データを操作することはできません。ほとんどの場合、UIおよび選択後のメソッドが提供されます。

ソース： Select2ドキュメント

11
Kelz

ソース： https://select2.org/programmatic-control/add-select-clear-items

アイテムを追加：

var data = {
    id: 1,
    text: 'Barn owl'
};

var newOption = new Option(data.text, data.id, false, false);
$('#mySelect2').append(newOption).trigger('change');

クリアアイテム：

$('#mySelect2').val(null).trigger('change');
4
JTvermose

V4では、select2を更新して、破壊して再構築する必要があります。チェック https://github.com/select2/select2/issues/28

1
FranBran

最近、1つのselect2オブジェクトを変更すると、2番目のオブジェクト（親-子グループ化）の内容が変更されるというシナリオがありました。 ajax呼び出しを使用して、Jsonデータの新しいセットを取得し、2番目のselect2オブジェクトで取得しました。以下のコードを含めました。

 $("#group").on('change', function () {
        var uri = "/Url/RetrieveNewResults";
        $.ajax({
            url: uri,
            data: {
                format: 'json',
                Id: $("#group :selected").val()
            },
            type: "POST",
            success: function (data) {
                $("#groupchild").html('');
                $("#groupchild").select2({
                    data: data,
                    theme: 'bootstrap',
                    placeholder: "Select a Type"
                });
            },
            error: function () {
                console.log("Error")
            }
        });
    });

2番目のselect2の以前のデータセットをクリアするには、$（ "＃groupchild"）。html（ ''）を含める必要があることがわかりました。お役に立てれば。

1
davidisnotnull

これが私がしたことです。

1. select2を拡張します

    Select2.prototype.setAjax = function (ajaxOptions)
                {
                    // Set the new ajax properties
                    var oAjaxOpts = this.options.get('ajax');
                    if (oAjaxOpts != undefined && oAjaxOpts != null)
                    {
                        for (var sKey in ajaxOptions)
                        {
                            oAjaxOpts[sKey] = ajaxOptions[sKey];
                        }
                    }
                    var DataAdapter = this.options.get('dataAdapter');
                    this.dataAdapter = new DataAdapter(this.$element, this.options);
                }

2.いつものように初期化します（たとえば---あなたのものは異なるかもしれません）

jHtmlFrag.select2({
            dropdownParent: $(oData.jDiv),
            placeholder: "Select Option",
            allowClear: true,
            minimumInputLength: 2,
            ajax: {
                url: "",
                method: "POST",
                dataType: 'json',
                delay: 250,
                processResults: function (oResults, params)
                {
                    let page = params.page || 1;
                    // console.log(oResults, (params.page * 10));
                    return {
                        results: oResults.data,
                        pagination: {
                            more: (page * 10) < oResults.recordsFiltered
                        }
                    };
                }
            }
        }).val(null).trigger('change');

3.新しい拡張機能funcを呼び出して、Ajaxオプションを動的に設定します

jCombo.select2('setAjax', {
            url: sUrl,
            data: function (params)
            {
                let query = {
                    search: params.term,
                    type: params._type,
                    page: params.page || 1,
                }
                return query;
            },
        });
0
Luesak Luesukprasert