Fork me on GitHub

Rob La Placa

Custom Selectbox

SelectBox replacement using jQuery. Hides the selectbox and replaces it with an easy to style css version.

Configuration

These are configuration settings that can be passed in when initializing the Class.

Parameter Type Description
selectbox jQuery Object with Dom Element The selectbox that is being customized, REQUIRED (default undefined)
customScrollbar Boolean Whether or not to use jScrollPane to restyle system scrollbar (default true)
changeCallback Function Function that gets executed on change of the selectbox (default empty function)
width Integer Fixed width of the selectbox
height Integer Height of the options dropdown
scrollOptions Object jScrollPane options, refer to jscrollpane documentation for possible options:
http://jscrollpane.kelvinluck.com/

Example using configuration settings

<script>
	$("select.custom").each(function() {
		var sb = new SelectBox({
			selectbox: $(this),
			customScrollbar: true,
			changeCallback: function() {
				alert("I was changed!");
			}
		});
	});
</script>

Public Methods

These are values that can be called on an individual instance of the Selectbox class

Public Function Description
open() Displays the select box's options
close() Hides the select box's options
enable() Returns the selectbox to an interactive state
disable() Disables interactivity
jumpToValue(String) Updates the selectbox to the option with the corresponding value
jumpToIndex(Integer) Updates the selectbox to the option with the corresponding index
sync() If the underlying selectbox has been updated, sync may be called to update the HTML markup to reflect the updated values.

Example calling public functions

<script>
	var sb = new SelectBox({
		selectbox: $("select.custom").eq(0)
	});

	sb.jumpToIndex(3);
	sb.disable();
</script>

Basic Selectbox

Selectbox with Scrollbar

Opt Group Support

The optgroup label attribute appears in the list in italics like a real select

Icon support

If an option has a classname, when the option is rendered an extra span with that class will get injected into the generated html of the select. This can then be styled however you like.

Interactivity

This example is using the change callback as well as custom id's for the selects so they can get custom behavior