Easy Drop Down Select List Plugin - DropKick

File Size: 128 KB
Views Total: 28711
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Drop Down Select List Plugin - DropKick

DropKick is a fast jQuery/JavaScript plugin that turns a standard html select box into a clean and skinnable drop down list that supports native keyboard navigation and dynamic selects.

How to use it:

1. Include the latest jQuery library and jQuery dropkick plugin in your html document

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="dropkick.js"></script>

2. Include required dropkick.css for basic style

<link href="dropkick.css" rel="stylesheet" />

3. Create a regular HTML select box. Using tabindex attribute to enable navigation between selects via tabbing

<select name="country" class="demo" tabindex="2">
  <option value="AU">Australia</option>
  <option value="CA">Canada</option>
  <option value="DE">Germany</option>
  <option value="JP">Japan</option>
  <option value="GB">United Kingdom</option>
  <option value="US">United States</option>

4. Call the plugin on the select box and customize the dropdown list with the following iptions.


   * Called once after the DK element is inserted into the DOM.
   * The value of `this` is the Dropkick object itself.
   * @config initialize
   * @type Function
  initialize() {},

   * Whether or not you would like Dropkick to render on mobile devices.
   * @default false
   * @property {boolean} mobile
   * @type boolean
  mobile: true,

   * 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.
   * @config change
   * @type Function
  change() {},

   * Called whenever the Dropkick select is opened. The value of `this` is the Dropkick object itself.
   * @config open
   * @type Function
  open() {},

   * Called whenever the Dropkick select is closed. The value of `this` is the Dropkick object itself.
   * @config close
   * @type Function
  close() {},

  // Search method; "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).
   * @default "strict"
   * @config search
   * @type string
  search: "strict",

   * Bubble up the custom change event attached to Dropkick to the original element (select).
  bubble: true


5. Customize the drop down list using the following variables in the dropkick.scss or by overriding the CSS rules in the CSS.

$dk-color-aux: #3297fd !default;
$dk-border-color: #CCCCCC !default;
$dk-border-color-aux: #3297fd !default;
$dk-border-radius: 0.4em !default;
$dk-disabled-color: #BBBBBB !default;

6. You can also implement the DropKick as a Vanilla JavaScript plugin.

const select = new Dropkick("#demo",{
      // options here

7. Available methods & properties.

// disabled or not

// the form associated with the select

// the number of options in the select

// is multiple select or not

// the index of the selected option

// an array of options

// an array of selected options

// the current value

// add a new option
select.add("New option", 3);

// get the DOM node of index

// remove an option

// open the select

// close the select

// disable the select

// disable an option with an index
select.disable(3, true);

// re-enable the select

// re-enable an option
select.disable(3, false);

// hide an option
select.hide(3, true);

// make an option visible
select.hide(3, false);

// select an option by index

// select an option by value

// select a single option

// search an option
// pattern: search pattern
// mode: "strict", "partial", or "fuzzy"
select.search(pattern, mode, string);

// move the focus to the select

// reset the select

// reset to first option

// refresh the select

// dispose the select


v2.2.5 (2019-09-04)

  • bugfixed
  • Doc updated

This awesome jQuery plugin is developed by robdel12. For more Advanced Usages, please check the demo page or visit the official website.