jQuery Select Dropdown List Replacement - Pretty Dropdowns

File Size: 15.6 KB
Views Total: 9127
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Select Dropdown List Replacement - Pretty Dropdowns

Pretty Dropdowns is a jQuery plugin used to replace the regular select element with a nice-looking dropdown UI that preserves the native select methods.


$ npm install pretty-dropdowns

# Bower
$ bower install pretty-dropdowns

How to use it:

1. First you need to load the prettydropdowns.css in the header of the webpage that will provide the default styles for the dropdown.

<link href="prettydropdowns.css" rel="stylesheet">

2. Then load the prettydropdowns.js after jQuery but before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.prettydropdowns.js"></script>

3. Call the prettyDropdown() method on your existing select element and the plugin will take care of the rest.


4. You can also add more CSS styles, just like in prettydropdowns.css file.

5. Call the prettyDropdown() method on your existing select element and the plugin will take care of the rest.


6. Default plugin options.


  // The default behavior is to move the selected item to the top. 
  // If you want the order of items to remain static, then set this to true.
  classic: false,

  // Custom class to customize the drop-down menu style.
  customClass: 'arrow',

  // Width
  width: null,

  // Item height in pixels.
  height: 50,

  // The wait period (in milliseconds) before collapsing the drop-down menu after you hover off of it. 
  hoverIntent: 200,

  // The separator character to use for the list of selected items in a multi-select menu.
  multiDelimiter: '; ',

  // The maximum number of selected items to display in a multi-select menu before replacing it with a summary (e.g., "2/3 selected"). 
  // To display "0/3 selected" instead of "None selected", set this option to -1.
  multiVerbosity: 99,

  // The icon or symbol to mark that an item is selected. HTML is accepted
  selectedMarker: '&#10003;',

  // Callback
  afterLoad: function(){}


v4.17.0 (2019-06-10)

  • Added ability to keep menu open using hoverIntent: -1
  • Fixed option group out of sync with widget if multiple options with same text

v4.15.0 (2019-06-09)

  • Improved timestamp to prevent potential id collisions
  • Fixed aria-activedescendant not getting updated

v4.13.0 (2018-09-08)

  • Add width option

v4.12.2 (2018-04-26)

  • Fix prefix/postfix issue in optgroup.
  • Fix scrollTop returning zero.


  • Add prefix/suffix support for <optgroup>


  • Update to v4.11.0: Fixed None selected by default


  • Fix open menu hidden beyind another layer


  • Fixed Bug: using size attribute leads to rendering bug
  • Optimize click handler; remove scrollIntoView()


  • dist  Honor `size` attribute


  • Fix multi-select container height 1px larger
  • Remove one reliance on !important


  • Add 'title' for <optgroup>
  • Add 'data-prefix' and 'data-suffix' attributes


  • Add support for aria-label
  • Add support for disabled <select> and <option>


  • Fix aria-expanded not updated in some cases
  • Add id to <ul> for easier styling


  • Add aria-labelledby integration


  • Sync <select> for multi-select lists


  • Move :hover from container div to ul


  • Prevent navigation when menu closed; fix 1st item not in view issue


  • Add ARIA roles for accessibility


  • Fix missing right border in some cases


  • Fix keyboard navigation (filtering) issue


  • Fix nohover style getting overridden


  • allows for PgUp/PgDn navigation


  • v3.0.0


  • CSS update


  • JS update


  • Fix negative width issue

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