0

プロジェクトで複数回呼び出す関数があります。

function fillSelect(select) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Data.asmx/Status",
        dataType: "json",
        async: true,
        success: function(data) {
            $.each(data.d, function(i) {
                select.append('<option value=' + data.d[i].value + '>' + data.d[i].name + '</option>');
            });
        },
        error: function(result) {
            alert("Error occured. Contact admin");
        }
    });
}

次に、私のコードでは、次のように使用しています。

fillSelect($('select#status1'));
fillSelect($('select#status2'));
fillSelect($('select#status3'));

私がやりたいのは、関数をプラグインに変換することです。そのため、次のように呼び出すことができます。

$('select#status1, select#status2, select#status3').fillSelect();

http://starter.pixelgraphics.us/を使用して、空のスキーマを生成しました。

(function($) {
    $.ajaxSelect = function(el, select, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("ajaxSelect", base);

        base.init = function() {
            base.select = select;

            base.options = $.extend({}, $.ajaxSelect.defaultOptions, options);

            // Put your initialization code here
        };

        // Sample Function, Uncomment to use
        // base.functionName = function(paramaters){
        // 
        // };

        // Run initializer
        base.init();
    };

    $.ajaxSelect.defaultOptions = {
        clear: false //append to select or replace current items
    };

    $.fn.ajaxSelect = function(select, options) {
        return this.each(function() {
            (new $.ajaxSelect(this, select, options));
        });
    };

})(jQuery);

しかし、私はそれを埋める方法がわかりません。
私がやりたいのは、サーバーを呼び出してから、パラメーターに入力した数の選択項目を入力することです。
そのような小さなプラグインには、そのすべてのコードが本当に必要ですか？

この機能を備えたプラグインがおそらくいくつかあることは知っていますが、もう少し学ぶために、独自のプラグインを作成したいと思います:)

4

2 に答える 2

1

以下のようにできるすべてのボイラープレートは必要ありません

$.fn.fill = function fillSelect(options) {
   var self = this; 
   options = $.extend({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Data.asmx/Status",
            dataType: "json",
            async: true,
            success: function(data) {
               var list = "";
               $.each(data.d, function(i) {
                     list += '<option value=' 
                              + data.d[i].value + '>' 
                              + data.d[i].name 
                              + '</option>';
                  });
               self.filter("select").each(function(){
                   $(this).append(list);
               });
             },
            error: function(result) {
                alert("Error occured. Contact admin");
            }
          },options);
    $.ajax(options);
    return this;
}

関数がjQueryプロトタイプ/$.fnに追加されていることに最初に気付くのは。次に、成功ハンドラーが変更され、選択されたすべての要素が処理され、最後に選択が返され、チェーンが可能になります。これは、jQueryを使用する場合に通常予想されることです。

上記のコードは、選択したすべての「選択」要素にのみ同じオプションを追加します。他のものを選択した場合、オプションはそれらの要素に追加されません。

オプション要素を受け入れるように署名を変更しました。上記のバージョンでは、ajaxオプションと同じデフォルトのバージョンがあります。他の値が指定されている場合、デフォルトが存在する場合、それらはデフォルトの値をオーバーライドします。デフォルトが存在しない場合、値はオプションオブジェクトに追加されます

于 2012-11-05T12:52:49.523 に答える
0

$.fnここで説明されているように、オブジェクトにメソッドを追加する必要があります：http: //docs.jquery.com/Plugins/Authoring

キーワードは、関数のコードを呼び出すために使用されたjQueryセレクターに評価されるため、コードでパラメーターthisを使用する代わりに、selectthis

于 2012-11-05T12:49:55.453 に答える