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

关键字将this评估用于调用函数代码的 jQuery 选择器，因此不要select在代码中使用参数，只需使用this

于 2012-11-05T12:49:55.453 回答