Question

I’ve written a fairly basic jQuery plugin that takes an unordered list and creates a nice looking multi-selectable list. Calling it ‘multiSelector’, the plugin declaration looks like this:

jQuery.fn.multiSelector = function(options) {
    // plugin code
}

The plugin actually runs on a containing div with an unordered list inside (for CSS reasons, among others), so a typical use of this plugin looks like this:

var $listDiv = $('#listDiv') // div that contains unordered list
$listDiv.multiSelector();

It’s working great, so I’m not having any problems creating the plugin. However, what I’d like to do now is provide the user with a way to get all selected items from their list. I’ve looked online for how to create functions from this plugin, and I can’t really seem to find any ways to extend it with a function.

What would be great is to do something like this, where ‘itemArray’ is an array of strings based on the list item’s id (or something):

var itemArray = $listDiv.multiSelector().getSelected();

I realize my logic here is probably way off, but I’m just looking for some guidance on how to accomplish this. Maybe I need to write a new jQuery function to handle this specific task, or maybe I can still tack it onto this multiSelector plugin somehow. Any help would be appreciated.

Thanks.

Answer 1

I’d suggest adding the option to call a method as a parameter of the plugin. This is the way most (all?) jQuery UI plugins handle it.

jQuery.fn.multiSelector = function( options ) {
   if (typeof options === "string") {
      if (options == "selected") {
         ...return the selected elements
      }
      return null;
   }

   options = $.extend( {}, $.fn.multiSelector.defaults, options );

   ... rest of plugin body...
}

Then call it as

var selected = $('.selector').multiSelector('selected');