multiselect.css

/* original element */
#users	{border:0; width: 300px; height: 200px;}

/* needed for the plugin */
.clear {clear: both;}

.multiselect ul.selected { background: #f1f1f1; margin: 0; padding: 0; padding-top: 1px; overflow: auto; list-style: none; border: 0; float:left; position: relative; }

.multiselect ul.selected li { border-bottom: #ccc 1px solid; line-height: 20px; font-size: 11px; width: 90%; }
.multiselect ul.selected li:hover { background: #dfdfdf;}
.multiselect ul.selected li a { color: #999; text-decoration: none; padding: 0 0 0 20px; display: block; width: 80%; float: left;}
.multiselect ul.selected li a:hover { color: #000;}
.multiselect ul.selected li a.action { color: red; font-weight: bold; padding: 0 0 0 20px; display: block; width: 10px; float: left;}


.multiselect ul.available { padding: 0 0 0 20px; background: #f8f8f8; margin: 0; padding: 0; overflow: auto; list-style: none; border: 0; float:left; position: relative; border-left: 1px solid #ccc;}
.multiselect ul.available li { line-height: 20px; font-size: 11px;}
.multiselect ul.available li a { color: #999; text-decoration: none; padding: 0 0 0 20px; display: block; width: 65%; float: left;}
.multiselect ul.available li a:hover { color: #000;}
.multiselect ul.available li a.action { color: green; font-weight: bold; padding: 0 0 0 20px; display: block; width: 10px; float: left;}


.show_available {margin-top: 20px; float: left; height: 86px; width: 29px; background: url('./images/multiselect/show_available.png');}
.show_available:hover {background: url('./images/multiselect/show_available_hover.png');}
.hide_available {margin-top: 20px; float: left; height: 86px; width: 29px; background: url('./images/multiselect/show_available.png');}
.hide_available:hover {background: url('./images/multiselect/show_available_hover.png');}

ui.multiselect.js

/*
 * jQuery UI Multiselect
 *
 * Copyright (c) 2008 Michael Aufreiter (ma.zive.at)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 * 
 * http://tobeannounced
 *
 * Depends:
 *	ui.core.js
 *	ui.sortable.js
 */
 
(function($) {

$.widget("ui.multiselect", {
  _init: function() {
    
    // init code for mywidget
    
    // console.log(this.element);
    
		// this.oldSelect = $(el); -> this.element
		
		// hide this.element
		this.id = this.element.attr("id");
		this.container = $("<div class='"+this.options.className+"'>").insertAfter(this.element);
		
		this.selectedList = $("<ul class='selected'></ul>").appendTo(this.container);
		this.availableList = $("<ul class='available'></ul>").appendTo(this.container).hide();
		
		var that = this;
		
		this.showAvailableButton = $("<a href='#' class='show_available'></a>").click(function() {
		  that.availableList.show();
		  that.showAvailableButton.hide();
		  that.hideAvailableButton.show();
		}).appendTo(this.container);
		
		this.hideAvailableButton = $("<a href='#' class='hide_available'></a>").click(function() {
		  that.availableList.hide();
		  that.hideAvailableButton.hide();
		  that.showAvailableButton.show();
		}).appendTo(this.container).hide();
		
		$("<div class='clear'></div>").appendTo(this.container); // needed?
		
		// set dimensions
		this.selectedList.width(this.element.width());
		this.availableList.width(this.element.width()*0.6);
		this.selectedList.height(this.element.height());
		this.availableList.height(this.element.height());
		
		this.populateLists();		
		
		// register events
		this.registerAddEvents(this.availableList.find('a.action'));
		this.registerRemoveEvents(this.selectedList.find('a.action'));
				
		// make current selection sortable
		$(this.selectedList).sortable({
		  containment: 'parent',
		  update: function() { console.log('bla'); }
		  
		});

    this.addChoice();
  },
  populateLists: function() {
    this.selectedList.empty();
    this.availableList.empty();
    
    var that = this;
    this.element.find('option').each(function(i) {
      var item = $("<li><a href='#'>"+$(this).text()+"</a><a href='#' class='action'><span>*</span></a><div class='clear'></div></li>").appendTo(that.availableList);
      
      this.selected ? item.appendTo(that.selectedList) : item.appendTo(that.availableList);
      // if (this.selected)
      //   var item = $("<li><a href='#'>"+$(this).text()+"</a><a href='#' class='action'><span>x</span></a><div class='clear'></div></li>").appendTo(that.selectedList);
      // else
      //   var item = $("<li><a href='#'>"+$(this).text()+"</a><a href='#' class='action'><span>+</span></a><div class='clear'></div></li>").appendTo(that.availableList);

      // store the index as a property
      item[0].optionLink = this;
    });
  },
  registerAddEvents: function(elements) {
    var that = this;
    elements.click(function() {
      // select the corresponding option
      $(this).parent()[0].optionLink.selected = true;
      // move element to selectedList and reregister events
      $(this).parent().remove().appendTo(that.selectedList);
      //that.registerRemoveEvents();
      that.registerRemoveEvents(that.selectedList.find('a.action'));
    });
  },
  registerRemoveEvents: function(elements) {
    var that = this;
    elements.click(function() {
      // select the corresponding option
      $(this).parent()[0].optionLink.selected = false;
      // move element to availableList and reregister events
      $(this).parent().remove().appendTo(that.availableList);
      that.registerAddEvents(that.availableList.find('a.action'));
      //that.registerAddEvents();
    });
  }
});

// ??
// $.ui.multiselect.getter = "value length";

// default options
$.ui.multiselect.defaults = {
  className: "multiselect"
};

})(jQuery);