jQuery Select Dropdown List Replacement - Pretty Dropdowns

File Size: 15.6 KB
Views Total: 9309
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.

Installation:

# NPM
$ 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.

$('select').prettyDropdown();

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.

$('select').prettyDropdown();

6. Default plugin options.

$('select').prettyDropdown({

  // 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(){}
  
});

Changelog:

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.

2018-04-16

  • Add prefix/suffix support for <optgroup>

2017-03-17

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

2017-05-02

  • Fix open menu hidden beyind another layer

2017-04-04

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

2017-03-31

  • dist  Honor `size` attribute

2017-03-03

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

2017-03-02

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

2017-02-28

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

2017-02-24

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

2017-02-22

  • Add aria-labelledby integration

2017-02-21

  • Sync <select> for multi-select lists

2017-02-20

  • Move :hover from container div to ul

2017-02-18

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

2017-02-17

  • Add ARIA roles for accessibility

2017-02-12

  • Fix missing right border in some cases

2017-02-09

  • Fix keyboard navigation (filtering) issue

2017-01-19

  • Fix nohover style getting overridden

2017-01-18

  • allows for PgUp/PgDn navigation

2017-01-17

  • v3.0.0

2017-01-09

  • CSS update

2016-12-28

  • JS update

2016-11-15

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