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 );

Constructor

Dropkick
(
  • sel
  • options
)
Object

Defined in lib/dropkick.js:19

Parameters:

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();
                                

Methods

add
(
  • elem
  • before
)

Defined in lib/dropkick.js:253

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.

Parameters:

  • elem String

    HTMLOptionElement

  • before Node/Integer

    HTMLOptionElement/Index of Element

Example:

  var select = new Dropkick("#select");
                                    
                                      select.add("New option", 5);
                                    
build
(
  • sel
)
Object
private

Builds the Dropkick element from a select element

Parameters:

  • sel Node

    The HTMLSelectElement

Returns:

Object:

An object containing the new DK element and it's options

close ()

Defined in lib/dropkick.js:533

Closes the DK dropdown

Example:

  var select = new Dropkick("#select");
                                    
                                      select.close(); //closes dk dropdown
                                    
delegate ()
private

Defined in lib/dropkick.js:957

disable
(
  • elem
  • disabled
)

Defined in lib/dropkick.js:607

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

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);
                                    
dispose ()

Defined in lib/dropkick.js:907

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

Example:

  var select = new Dropkick("#select");
                                    
                                      select.dispose();
                                    
focus ()

Defined in lib/dropkick.js:833

Brings focus to the proper DK element

Example:

  var select = new Dropkick("#select");
                                    
                                      $("#some_elm").on("click", function() {
                                        select.focus();
                                      });
                                    
handleEvent ()
private

Defined in lib/dropkick.js:927

highlight ()
private
init
(
  • sel
  • opts
)
Object
private

Defined in lib/dropkick.js:356

Initializes the DK Object

Parameters:

  • sel Node

    [description]

  • opts Object

    Options to override defaults

Returns:

Object:

The DK Object

item
(
  • index
)
Node

Defined in lib/dropkick.js:317

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

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
                                    
keyHandler ()
private
onDocClick
(
  • event
)
private

Focus DK Element when corresponding label is clicked; close all other DK's

Parameters:

  • event Object

    Event from document click

open ()

Defined in lib/dropkick.js:564

Opens the DK dropdown

Example:

  var select = new Dropkick("#select");
                                    
                                      select.open(); //Opens the dk dropdown
                                    
refresh ()

Defined in lib/dropkick.js:889

Rebuilds the DK Object (use if HTMLSelectElement has changed)

Example:

  var select = new Dropkick("#select");
                                    
                                      //... [change original select] ...
                                    
                                      select.refresh();
                                    
remove
(
  • index
)

Defined in lib/dropkick.js:335

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

Parameters:

  • index Integer

    Index of element (positive or negative)

Example:

  var select = new Dropkick("#select");
                                    
                                      select.remove(4);
                                    
reset
(
  • clear
)

Defined in lib/dropkick.js:852

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).

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);
                                    
scrollTo ()
private
searchOptions ()
private
select
(
  • elem
  • disabled
)
Node

Defined in lib/dropkick.js:652

Selects an option from the list

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
(
  • elem
  • disabled
)
Node

Defined in lib/dropkick.js:738

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.

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);
                                    

Properties

disabled

Boolean

Defined in lib/dropkick.js:377

Whether the form is currently disabled or not

Example:

  var select = new Dropkick("#select");
                                    
                                      select.disabled;
                                    

form

Node

Defined in lib/dropkick.js:390

The form associated with the select

Example:

  var select = new Dropkick("#select");
                                    
                                      select.form;
                                    

length

Integer

Defined in lib/dropkick.js:403

The number of options in the select

Example:

  var select = new Dropkick("#select");
                                    
                                      select.length;
                                    

multiple

Boolean

Defined in lib/dropkick.js:416

If this select is a multi-select

Example:

  var select = new Dropkick("#select");
                                    
                                      select.multiple;
                                    

options

Array

Defined in lib/dropkick.js:429

An array of Dropkick options

Example:

  var select = new Dropkick("#select");
                                    
                                      select.options;
                                    

selectedIndex

Integer

Defined in lib/dropkick.js:442

An index of the first selected option

Example:

  var select = new Dropkick("#select");
                                    
                                      select.selectedIndex;
                                    

selectedOptions

Array

Defined in lib/dropkick.js:455

An array of selected Dropkick options

Example:

  var select = new Dropkick("#select");
                                    
                                      select.selectedOptions;
                                    

value

String

Defined in lib/dropkick.js:468

The current value of the select

Example:

  var select = new Dropkick("#select");
                                    
                                      select.value;
                                    

Attributes

change

Function

Defined in lib/dropkick.js:97

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.

close

Function

Defined in lib/dropkick.js:116

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

initialize

Function

Defined in lib/dropkick.js:87

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

open

Function

Defined in lib/dropkick.js:107

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