jQuery Select Dropdown List Replacement - Pretty Dropdowns

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

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.

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({
  customClass: 'arrow',
  height: 50,
  hoverIntent: 200,
  selectedDelimiter: '; ',
  selectedMarker: '&#10003;'
});

Change log:

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.