title: Convert function into plugin
body: <p>I have a function that I call multiple times in my projects:</p>
  
  <pre><code>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('&lt;option value=' + data.d[i].value + '&gt;' + data.d[i].name + '&lt;/option&gt;');
              });
          },
          error: function(result) {
              alert("Error occured. Contact admin");
          }
      });
  }
  </code></pre>
  
  <p>Then in my code I'm using this like so:</p>
  
  <pre><code>fillSelect($('select#status1'));
  fillSelect($('select#status2'));
  fillSelect($('select#status3'));
  </code></pre>
  
  <p>What I would like to do is to convert my function into plugin, so I would be able to call it as so:</p>
  
  <pre><code>$('select#status1, select#status2, select#status3').fillSelect();
  </code></pre>
  
  <p>Using <a href="http://starter.pixelgraphics.us/" rel="nofollow">http://starter.pixelgraphics.us/</a> I've generated empty schema:</p>
  
  <pre><code>(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);
  </code></pre>
  
  <p>but I don't know how to fill it.<br />
  What I would like to do is to call sever ones and then fill as many select items as I put in parameters.<br />
  Is all that code really necessary for such a small plugin?</p>
  
  <p><strong>I know that there are probably some plugins that this functionality, but I would like to create my own plugin, just to learn a bit more :)</strong> </p>