Javascript 将函数转换为插件

我在项目中多次调用了一个函数：

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");
        }
    });
}

我想做的是将我的函数转换成插件，这样我就可以这样调用它：

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

使用我生成的空模式：

(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);

但我不知道如何填充它。
我想做的是调用几个选项，然后填充我在参数中输入的尽可能多的选择项。
对于这样一个小插件，所有这些代码真的都是必需的吗

---

我知道可能有一些插件支持此功能，但我想创建自己的插件，只是为了了解更多：）

您只需将您的方法添加到

$.fn

对象，如下所述：

---

this

关键字将对用于调用函数代码的jQuery选择器求值，因此，不要在代码中使用

select

参数，只需使用

this

即可，您不需要按照下面的方法执行所有操作

$.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;
}

$.fn.fill=函数fillSelect（选项）{
var self=这个；
选项=$。扩展({
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
url:“Data.asmx/Status”，
数据类型：“json”，
async:true，
成功：功能（数据）{
var list=“”；
$。每个（数据d，函数（i）{
列表+=''
+data.d[i].name
+ '';
});
self.filter（“select”）.each（函数（）{
$（此）.append（列表）；
});
},
错误：函数（结果）{
警报（“发生错误。请与管理员联系”）；
}
}，选项）；
$.ajax（选项）；
归还这个；
}

首先要注意的是，该函数被添加到jqueryprototype/$.fn中。然后更改成功处理程序，以便处理所有选定的元素，最后返回选择以使链接成为可能，正如使用jQuery时通常所期望的那样

上述代码仅将相同的选项附加到所有选定的“选择”元素。如果选择其他选项，这些选项将不会附加到这些元素

---

我已将签名更改为接受选项元素。在上面的版本中，默认的vesrion与ajax选项相等。如果提供了其他值，则如果存在默认值，它们将覆盖默认值。如果默认值不存在，这些值将添加到选项对象中

是否要用相同的数据填充所有选择？或者，当只向服务器发送一个请求时，您将如何过滤每个请求的数据？是的，没错，我希望用相同的数据填充所有选择。所以我认为只有一个请求就可以了。对于“选择”，我会为选项创建一个字符串，然后只使用一个append（.html？）-这样你只需要点击DOM一次。这是一个很好的建议。谢谢但这是否只会对多个选择执行一个请求？还是为每个请求选择一个？5 selects=5个对服务器的请求？@Misiu它只会执行一个请求我正试图使用您的代码，当我这样使用它时：

$（'select#myselect'）。fill（）

I get error:Uncaught TypeError:Object#没有方法'find'。你知道为什么吗？第一行还有一个错误：）我想这是个错误。@Misiu很抱歉第一行有一个拼写错误。（0本）

$.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;
}