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:35

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:269

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:549

Closes the DK dropdown

Example:

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

Defined in lib/dropkick.js:973

disable
(
  • elem
  • disabled
)

Defined in lib/dropkick.js:623

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:923

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:849

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:943

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

Defined in lib/dropkick.js:372

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:333

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:580

Opens the DK dropdown

Example:

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

Defined in lib/dropkick.js:905

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:351

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:868

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:668

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:754

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:393

Whether the form is currently disabled or not

Example:

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

form

Node

Defined in lib/dropkick.js:406

The form associated with the select

Example:

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

length

Integer

Defined in lib/dropkick.js:419

The number of options in the select

Example:

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

multiple

Boolean

Defined in lib/dropkick.js:432

If this select is a multi-select

Example:

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

options

Array

Defined in lib/dropkick.js:445

An array of Dropkick options

Example:

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

selectedIndex

Integer

Defined in lib/dropkick.js:458

An index of the first selected option

Example:

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

selectedOptions

Array

Defined in lib/dropkick.js:471

An array of selected Dropkick options

Example:

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

value

String

Defined in lib/dropkick.js:484

The current value of the select

Example:

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

Attributes

change

Function

Defined in lib/dropkick.js:113

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:132

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

initialize

Function

Defined in lib/dropkick.js:103

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:123

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