jQuery Super Select Demo

Demo

Try interacting with your tab key to focus, your arrow keys to select an option, try the scroll wheel, clicking on the field labels, search-as-you-type (first alphabet-only for windows), etc

SuperSelect modified by jQuery('#select1').superselect();

Styled select carries the same CSS styles as the first

Un-styled select is un-styled

Last selected value jQuery is making all select elements report their value here onchange

-

Long

Regular "select box styling" scripts uses unnecessary markups like ul & li to render select options. This approach means having to add reams of javascript to create new html elements, copy option values into those elements, manage arrow keys, pass chosen option values back into hidden input fields.

Was iframe shims added to manage z-index issues? Is there support for search-as-you-type? What if ajax scripts changes the select options?

Short

superselect uses the actual select widget for displaying options, after activating it's size attribute. That is it.

Usage

Given a select box,


	<!-- your select tag -->
	<select name="my-select">
	  <!-- your option tags -->
	</select>

Include jQuery, superselect script & apply it to your select element


	<script src="jquery.min.js"></script>
	<script src="jquery.superselect.min.js"></script>
	<script>
	  jQuery('select').superselect();
	</script>

Result

Your select will become


	<div class="superselect-wrap superselect-?" tabindex="0">
	  <div class="superselect-current"><!-- current selection --></div>
	</div>
	<!-- your select tag -->
	<select name="my-select">
	  <!-- your option tags -->
	</select>