抽象クラスとしての複雑な形式のSelect2

debugcn 投稿 Dev

ミケランジェロ

フォームでselect2オブジェクトを使用する必要があります。これは私のフォームです申請書を入力してください http://i.stack.imgur.com/jVILq.jpg

多くの選択されたhtmlオブジェクトがあります。

たとえば、Customers選択ボックスをSelect2オブジェクトに変更したい場合、jsfiddle.netに投稿されたこの小さなコードを書きましたが、保守が難しすぎるため、選択ごとにこの関数のコピーを作成できません。

どうすればそれを抽象化できますか？

ここにサンプルを投稿しました：http：//jsfiddle.net/GcJgU/7/

ユーザーFlipからの潜在的な解決策をすでに見つけましたが、このJQueryオブジェクトをページ内のすべての入力非表示htmlオブジェクトに適用する必要があるため、完全ではありません。

これは例です：

$(".select2").select2({
    ajax: {
        url: $(this).attr("url-search") + "/term/",
        dataType: 'json',
        cache: true,
        data: function (term, page) {
            return {
                term: term
            };
        },
        results: function (data) {
            var results = [];
            $.each(data, function (index, item) {
                var id = $(this).attr("field-id");
                var fieldname = $(this).attr("fields-data");
                results.push({
                    id: item[id],
                    text: item[fieldname]
                });
            });
            return {
                results: results
            };
        },
    },
    formatResult: function (object, container, query) {
        console.log(object);
    },
    initSelection: function (element, callback) {
        var id = $(element).val();
        var fieldid = $(element).attr("field-id");
        var fieldname = $(element).attr("fields-data");
        $.ajax($(element).attr("url-searchid") + "/term/" + id, {
            dataType: "json"
        }).done(function (items) {
            var data = {
                id: items[0][fieldid],
                text: items[0][fieldname]
            };
            callback(data);
        });
    }
});

$（this）.attr（ "url-search"）が読み取られず、検索プロセスが開始されないようです。理由がわかりません。

みんなありがとう

フリップ

function select2Factory(select2) {
    return {
        minimumInputLength: 3,
        ajax: {
            url: select2.attr("callback-url"),
            dataType: 'json',
            cache: true,
            data: function (term, page) {
                return {
                    term: term
                };
            },
            results: function (data) {
                var results = [];
                $.each(data, function (index, item) {
                    var $this = $(this);
                    var id = select2.attr("field-id");
                    var fieldname = select2.attr("field-data");
                        results.push({
                            id: item[id],
                            text: item[fieldname]
                        });
                });
                return {
                    results: results
                };
            },
        },
        initSelection: function (element, callback) {
            var id = $(element).val();
            var fieldid = select2.attr("field-id");
            var fieldname = select2.attr("field-data");
            $.ajax("/admin/customers/searchbyid/term/" + id, {
                dataType: "json"}).done(function(items) { 
                    var data = {id: items[0][fieldid], text: items[0][fieldname] };
                    callback(data); 
            });
        }
    }
}

$el = $("#customer_id");
$el.select2(select2Factory($el));

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]