The Selectify plugin turns the select element into a stylable and customizable element.
The element can receive focus and blur.
When focussed, all key strokes for selecting elements will work including browsing by pressing the up and down keys.
The select element will be hidden and every selected item is set as selected in the select element.

Get source Get NuGet package

Demo

A dropdownlist filled with countries.

The code

$("select").selectify();

Options

maxItems

Options

maxItems datatype: Integer

Sets how many items will be shown before a scrollbar apears.
default: 10
$("select").selectify({ maxItems : 5 });

Methods

open

Opens the selectify element.
$("select").selectify("open");

close

Closes the selectify element.
$("select").selectify("close");

update

Selects an item in the selectify element.
string newValue: This method requires a string as second argument, the new selected value.
When the new value is not found, no event will be triggered.
$("select").selectify("update", "newValue");

destroy

Destroys a selectify element, unbinds all events and displays the select.
$("select").selectify("destroy");

Requirements

  • jQuery 1.8.3+ (could also work on previous versions, but is not tested)

Known issues

  • Does not work on multiselect selects.