Use Select where you would use a native select. It doesn't, and will never, provide any sort of autocomplete functionality, so you probably don't want to use it on a list of more than a few hundred elements.
Select uses Tether to efficiently position its element container.
IE9+ and all modern browsers
To initialize a single
selectElement, simply create a
new Select object.
new Select el: selectElement
To initialize all selects on a page, you can use the
By default, that will init all
select elements, pass a
selector to be more specific:
You can pass any options you'd like to init your select's with into
Select constructor returns a
Select object. You can also get the select instance by reading the
.selectInstance property off of the
MySelect = new Select el: myElement # OR new Select el: myElement MySelect = el.selectInstance
Select object has the following properties:
.close(): Close the dropdown, if it's open
.open(): Open the dropdown, if it's closed
.toggle(): Toggle between open and closed
.isOpen(): Returns true if the dropdown is open
.change(val): Change the select to the option with the value provided
.update(): Update the dropdown with new options. This happens automatically when you change the underlying select, so you should never have to call it.
.value: The current value of the select
You can also bind events on the select object:
.on(event, handler, [context]): When
.off(event, [handler]): Unbind the provided
.once(event, handler, [context]): The next time
When the select's value changes, the value of the original
select element it's based on will change
as well, so feel free to read the value from that element, or listen to it's
To change from the default theme, change the
new Select el: selectElement className: 'select-theme-dark'
Select has an option called
alignToHighlighted which allows you to change whether
the drop is positioned like a real
select element (with the currently selected option over the element) or like a canonical dropdown menu.
By default, this property is set to
"auto", meaning it will align the drop like a select only when the number of items in the options chooser does not cause it to scroll. The other options are
"always" and never
In this example, we Select to always open the drop like a dropdown menu.
new Select el: selectElement alignToHighlighted: 'never'
By default, select fallsback to opening the native browser select on touch devices which are less than or equal to 640px in either height or width.
To disable this:
new Select el: selectElement useNative: false
Currently there are three themes for Select.js.
|Default||(No class name necessary)|