Easy jQuery Based Drop Down Select List - DropKick

DropKick is a fast jQuery 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 java script library and jQuery dropkick in your html document

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

2. Include required dropkick.css for basic style

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

3. Create an html list. 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>
</select>

4. Create a custom theme

.dk_theme_black {
background: #aebcbf;
background: -moz-linear-gradient(top,  #aebcbf 0%,  #6e7774 50%,  #0a0e0a 51%,  #0a0809 100%  );
background: -webkit-gradient(linear,  left top,  left bottom,  color-stop(0%, #aebcbf),  color-stop(50%, #6e7774),  color-stop(51%, #0a0e0a),  color-stop(100%, #0a0809)  );
background: -webkit-linear-gradient(top,  #aebcbf 0%,  #6e7774 50%,  #0a0e0a 51%,  #0a0809 100%  );
background: -o-linear-gradient(top,  #aebcbf 0%,  #6e7774 50%,  #0a0e0a 51%,  #0a0809 100%  );
background: -ms-linear-gradient(top,  #aebcbf 0%,  #6e7774 50%,  #0a0e0a 51%,  #0a0809 100%  );
background: linear-gradient(top,  #aebcbf 0%,  #6e7774 50%,  #0a0e0a 51%,  #0a0809 100%  );
}
.dk_theme_black .dk_toggle,  .dk_theme_black.dk_open .dk_toggle {
background-color: transparent;
color: #fff;
text-shadow: none;
}
.dk_theme_black .dk_options a {
background-color: #333;
color: #fff;
text-shadow: none;
}
.dk_theme_black .dk_options a:hover,  .dk_theme_black .dk_option_current a {
background-color: #E15A01;
color: #fff;
text-shadow: #604A42 0 1px 0;
}

5. Call the plugin with options

$('.demo').dropkick({
  /**
   * 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
});

Change log:

v2.2.4 (2018-02-13)

• bugfix

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