initialize

Called once after the DK element is inserted into the DOM. The value of this is the Dropkick object itself.

initialize()

mobile

Whether or not you would like Dropkick to render on mobile devices.

mobile
Properties
mobile (boolean)

change

Called whenever the value of the Dropkick select changes (by user action or through the API). The value of this is the Dropkick object itself.

change()

open

Called whenever the Dropkick select is opened. The value of this is the Dropkick object itself.

open()

close

Called whenever the Dropkick select is closed. The value of this is the Dropkick object itself.

close()

"strict" - The search string matches exactly from the beginning of the option's text value (case insensitive).

"partial" - The search string matches part of the option's text value (case insensitive).

"fuzzy" - The search string matches the characters in the given order (not exclusively). The strongest match is selected first. (case insensitive).

search

bubble

Bubble up the custom change event attached to Dropkick to the original element (select).

bubble

Dropkick

Getting started

After you've cloned the repo you will need to add the library to your page. In the build/js folder use one of the two DropKick files given. One has a version number in the file name and the other is a version number-less version. You will also need to grab the css from build/css and load it on the page.

Once those files are imported into the page you can call DropKick on any HTMLSelectElement: new Dropkick( HTMLSelectElement, Options ); or new Dropkick( "ID", Options );. This returns the dropkick object to you. It may be useful for you to store this in a var to reference later.

If you're using jQuery you can do this instead: $('#select').dropkick( Options );

new Dropkick(sel: elem, options: opts): object
Parameters
sel (elem) HTMLSelect Element being passed.
options (opts) See list of properties you can pass in here
Returns
object: DropKick Object for that select. You can call your methods on this if stored in a var
Example
// Pure JS
var select = new Dropkick("#select");
// jQuery
$("#select").dropkick();
Instance Members
disabled
form
length
multiple
options
selectedIndex
selectedOptions
value

add

Adds an element to the select. This option will not only add it to the original select, but create a Dropkick option and add it to the Dropkick select.

add(elem: string, before: Node/Integer)
Parameters
elem (string) HTMLOptionElement
before (Node/Integer) HTMLOptionElement/Index of Element
Example
var select = new Dropkick("#select");

select.add("New option", 5);

item

Selects an option in the list at the desired index (negative numbers select from the end).

item(index: Integer): Node
Parameters
index (Integer) Index of element (positive or negative)
Returns
Node: The DK option from the list, or null if not found
Example
var select = new Dropkick("#select");

select.item(4); //returns DOM node of index

remove

Removes the option (from both the select and Dropkick) at the given index.

remove(index: Integer)
Parameters
index (Integer) Index of element (positive or negative)
Example
var select = new Dropkick("#select");

select.remove(4);

close

Closes the DK dropdown

close()
Example
var select = new Dropkick("#select");

select.close(); //closes dk dropdown

open

Opens the DK dropdown

open()
Example
var select = new Dropkick("#select");

select.open(); //Opens the dk dropdown

disable

Disables or enables an option; if only a boolean is passed (or nothing), then the entire Dropkick will be disabled or enabled.

disable(elem: Integer, disabled: Boolean)
Parameters
elem (Integer) The element or index to disable
disabled (Boolean) Value of disabled
Example
var select = new Dropkick("#select");

// To disable the entire select
select.disable();

// To disable just an option with an index
select.disable(4, true);

// To re-enable the entire select
select.disable(false);

// To re-enable just an option with an index
select.disable(4, false);

hide

Hides or shows an option.

hide(elem: Integer, hidden: Boolean)
Parameters
elem (Integer) The element or index to hide
hidden (Boolean) Whether or not to hide the element
Example
var select = new Dropkick("#select");

// To hide an option with an index
select.hide(4, true);

// To make an option visible with an index
select.hide(4, false);

select

Selects an option from the list

select(elem: String, disabled: Boolean): Node
Parameters
elem (String) The element, index, or value to select
disabled (Boolean) Selects disabled options
Returns
Node: The selected element
Example
var elm = new Dropkick("#select");

// Select by index
elm.select(4); //selects & returns 5th item in the list

// Select by value
elm.select("AL"); // selects & returns option with the value "AL"

selectOne

Selects a single option from the list and scrolls to it (if the select is open or on multi-selects). Useful for selecting an option after a search by the user. Important to note: this doesn't close the dropdown when selecting. It keeps the dropdown open and scrolls to proper position.

selectOne(elem: Integer, disabled: Boolean): Node
Parameters
elem (Integer) The element or index to select
disabled (Boolean) Selects disabled options
Returns
Node: The selected element
Example
var select = new Dropkick("#select");

select.selectOne(4);

Finds all options who's text matches a pattern (strict, partial, or fuzzy)

"strict" - The search string matches exactly from the beginning of the option's text value (case insensitive).

"partial" - The search string matches part of the option's text value (case insensitive).

"fuzzy" - The search string matches the characters in the given order (not exclusively). The strongest match is selected first. (case insensitive).

search(string: String, mode: Integer): Boolean
Parameters
string (String) The string to search for
mode (Integer) How to search; "strict", "partial", or "fuzzy"
Returns
Boolean: An Array of matched elements

focus

Brings focus to the proper DK element

focus()
Example
var select = new Dropkick("#select");

$("#some_elm").on("click", function() {
  select.focus();
});

reset

Resets the Dropkick and select to it's original selected options; if clear is true, It will select the first option by default (or no options for multi-selects).

reset(clear: Boolean)
Parameters
clear (Boolean) Defaults to first option if true
Example
var select = new Dropkick("#select");

// Reset to originally `selected` option
select.reset();

// Reset to first option in select
select.reset(true);

refresh

Rebuilds the DK Object (use if HTMLSelectElement has changed)

refresh()
Example
var select = new Dropkick("#select");

//... [change original select] ...

select.refresh();

dispose

Removes the DK Object from the cache and the element from the DOM

dispose()
Example
var select = new Dropkick("#select");

select.dispose();