Stub of a select menu replacement. Currently useless, but will be handy when it can be tied to a form element to change its value, and base its options on an existing <select> menu.

Select.js

// Implemented like this:

$(document).ready( function ( ) {
	var Chooser = new Menu ( "#select", [
		{ label : "First Item", value : "1" },
		{ label : "Second Item", value : "2" },
		{ label : "Your Mother's Item", value : "3" }
	]);
})

/*
	The Menu manager:
*/

function Menu ( el , opts ) {
	var self = this;

	self.el = $(el);
	self.options = [];
	self.open = false;

	self.init( opts );
}

Menu.prototype = {

	init : function ( opts ) {
		var self = this;

		for ( var o = 0; o < opts.length; o++ ) {
			self.options.push( new Option( opts[o] , this ) );
		}
		self.choose(0);
		self.listen();
		self.close();
	},
	listen : function ( ) {
		var self = this;

		$(self.el).on( 'click' , '.item' , function ( ) {
			if ( self.open ) {
				self.choose($(this).index(".item"));
			} else {
				self.expand();
			}
		});
	},
	expand : function ( ) {
		var self = this;

		for ( var o = 0; o < self.options.length; o++ ) {
			self.options[o].show();
		}

		self.el.addClass('open');

		self.open = true;
	},
	close : function ( ) {
		var self = this;

		for ( var o = 0; o < self.options.length; o++ ) {
			if ( ! self.options[o].active ) {
				self.options[o].hide();
			}
		}

		self.el.removeClass('open');

		self.open = false;
	},
	choose : function ( index ) {
		var self = this;

		for ( var o = 0; o < self.options.length; o++ ) {
			self.options[o].active = false;
		}

		self.options[index].active = true;

		self.close();
	}
};

/*
	Each Option:
*/

function Option ( opt , group ) {
	var self = this;
	self.group = group;
	self.active = false;
	self.label = opt.label;
	self.value = opt.value || opt.label;

	self.init();
}

Option.prototype = {
	init : function ( ) {
		var self = this;

		self.el = $("<div />").addClass("item").data('value',self.value).text(self.label);
		self.el.appendTo(self.group.el);
	},
	show : function ( ) {
		var self = this;

		self.el.slideDown(100);
	},
	hide : function ( ) {
		var self = this;

		self.el.slideUp(100);
	},
	pick : function ( ) {
		var self = this;

		self.active = true;
	}
};