5

select2 4.0 を使用していますが、json ファイルからデータをロードすると、作成された要素のどれもselect2:selectイベントを発生させません。イベント委任と関係があると思いましたが、ウェブサイトの例はうまくいくようです。

私は過去1時間、これについて頭を悩ませてきましたが、何が欠けているのか理解できません。

現在、これを使用してアイテムを選択していますが、明らかに機能しません。

$("body").on("click", "#select2-select-results .person-entry", function()
{
    var $this = $(this);
    var name = $this.data('name');

    select2.find('option').val(name).text(name);
});

バインディング$(...).on('select2:select');は決して発火$(...).on('select2:open);しませんが、発火します。だから私は何が起こっているのか分かりません。

ただし、データがロードされたときに<option>タグが作成されていないことに気付きました。

これは、物事を処理している私の JavaScript 全体です。

(function($)
{
    "use strict";
    var term = null;
    var select2 = $("#select");

    select2.select2({
        allowClear: true,
        ajax: {
            url: "js/data.json",
            dataType: "json",
            delay: 250,
            data: function(params)
            {
                // Save the terms for filtering
                term = params.term;

                return params;
            },
            processResults: function(data)
            {
                var people = [];

                for(var i = 0; i < data.people.length; i++)
                {
                    var person = data.people[i];
                    var filter = term || '';

                    if (person.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
                        people.push(person);
                    }
                }

                return {
                    results: people
                };
            }
        },
        templateResult: function(person)
        {
            if (person.loading) {
                return person.text;
            }

            var personDetails = '<div class="person-information">' +
                '<span class="person-name">' + person.name + '</span>' +
                '<span class="person-address">' + person.address + '</span>' +
                '</div>';

            return '<div class="person-entry" data-name="' + person.name + '"><img src="' + person.image + '" />' + personDetails + '</div>';
        },
        templateSelection: function(person)
        {
            return person.name;
        },
        escapeMarkup: function(markup)
        {
            return markup
        }
    });

    $("body").on("click", "#select2-select-results .person-entry", function()
    {
        var $this = $(this);
        var name = $this.data('name');

        select2.find('option').val(name).text(name);
    });
})(jQuery);

誰かが私がここで間違っていることを教えてもらえますか? 私はそれを理解していません。

4

1 に答える 1

16

idデータ オブジェクトにフィールドを設定していないようです。このフィールドがないと、Select2 は何を設定するかを認識できないvalueため<select>、選択できません。

さらに、このtextフィールドは、結果リストにデータを検索して (デフォルトで) 表示するために必要です。

于 2015-04-30T18:11:18.733 に答える