A custom select class for jQuery

jquery.custom_select.js

/*
* Converts form selects to style-able elements using a span for the value, a ul for the options and a wrapper for extra control
* Keeps default form methods intact (automatically updates select, doesn't effect submit, uses label)
* Updates based on selected value on page load
*/

(function ($) {
	$.fn.selectGui = function () {
		var z = 1000;
		return this.each(function () {
			var that = {};
			that.label = null;
			that.select = $(this);
			that.wrapper = null;
			that.span = null;
			that.list = null;
			that.events = function() {
				// Show and hide the list
				that.span.click(function() {
					that.slideList();
				});

				// Click an li, update the span value and the select value
				$('li', that.list).click(function() {
					that.markLi($(this));
					that.select.change();
					that.slideList();
				});
				
				// Hook up the label for default form functionality
				if(that.select.attr('id') !== '') {
					that.label = $('label[for='+that.select.attr('id')+']');
					that.label.click(function(e) {
						that.span.trigger('click');
					});	
				}
				that.select.bind('refresh', function() {
					var li = $('li[data-val='+$(this).val()+']', that.list);
					that.markLi(li);
				});
				
				// Hide the list on clickOff
				$('body').click(function(event) {
					if (!$(event.target).closest(that.wrapper).length && !$(event.target).closest(that.label).length) {
						that.slideList('up');
					}
				});
			};
			that.markLi = function(li) {
				li.addClass('selected').siblings('li').removeClass('selected');
				that.select.val(li.attr('data-val'));
				that.span.text(li.text());
			};
			that.populateList = function() {
				$('option', that.select).each(function() {
					var option = $(this);
					var li = $('<li data-val="'+option.val()+'">'+option.text()+'</li>');
					that.list.append(li);
					if(option.is(':selected')) {
						li.addClass('selected');
					}
				});
			};
			that.slideList = function(direction) {
				if(!direction) {
					direction = null;
				}
				if(direction == 'up') {
					that.list.slideUp();
				} else if(direction == 'down') {
					that.list.slideDown();
				} else {
					that.list.slideToggle();
				}
			};
			that.setup = function() {
				that.select.wrap('<div class="singleselect gui '+that.select.attr('class')+'" style="z-index: '+z+'" />');
				// Make wrapper
				that.wrapper = that.select.parents('.singleselect.gui');
				// Make container for current value
				that.span = $('<span>'+$('option:selected', that.select).text()+'</span>');
				that.wrapper.prepend(that.span);
				z--;
				// Make list of select options, highlighting the current value
				that.list = $('<ul />');
				that.populateList();
				that.span.after(that.list);
				// Define width
				that.list.width(that.wrapper.width()-2);
				// Setup events
				that.events();
			};
			that.setup();
		});
	};
})(jQuery);