jQuery awesomeSelect

A plugin to make your selects awesome.

examples

description

Traditional html selects are vitually impossible to style consistently across browsers, so this plugin aims to help make it easier. By simply including the plugin's .js and .css files and instantiating the plugin with a single line of code, all html selects on the page get replaced by easily styled elements like spans and ul's, and hidden inputs take care of submitting the form data.

Click here to view the plugin sourcecode.

known issues

  • Does not support keyboard interaction
  • As a result of previous issue, does not support tabindex
  • Dropdown heights and widths only consider rudimentary variables. In the future it should consider its position in the browser, the browser viewport size, etc, to determine how large to display and where to locate itself.

a few notes...

  • Optgroup relationships are maintained (#2)
  • The plugin ignores multiple selects, as they're easier to style (#5)
  • If an option from the original select was marked as "selected", the plugin will maintain that default and display that option when the page first loads.
    examples:
    #1 - "Select a State"
    #2 - "Select Country"
    #4 - "Massachusetts"
    Otherwise, the first option in the select becomes the default (#3).
  • Comes with simple styles out of the box, but they can be very simply overwritten.
  • Triggers a "change" event on the hidden input when the value is changed.
    Should this be triggered from the span.as_select since it maintains the same id??? But if it was, then how would the value be retrieved using .val()?