jQuery Plugin To Create Easy-to-style Dropdown Select - dropSelect

dropSelect is a jQuery select replacement plugin that helps you create a fully customizable and styleable dropdown select box using CSS/CSS3 and a little JavaScript.

How to use it:

1. Include the dropSelect.css in the header that will provide the default styles for the dropdown select box.

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

2. Include the core JavaScript dropSelect.js after jQuery library:

<script src="//code.jquery.com/jquery-3.1.0.js"></script>
<script src="dropSelect.js"></script>

3. Call the function on the existing select box:

$('select').dropSelect();

4. Config the dropdown select box:

$('select').dropSelect({

  // class name
  className:             'dropSelect',

  // class for the caret arrow
  arrowClass:            'icon-arrow-down', 

  // fired when an item is selected
  callBack:              null, 

  // A callback to allow user formatting of the inner text
  formatter:             null, 

  // Should all empty items be included
  includeEmpties:        false,

  // If the first item is empty, include it as initial text
  allowFirstEmptyAsInit: true, 

  // Match the selected attribute
  setSelected:           true, 

  // Value of item to force as selected
  forceSelected:         null, 

  //Set to true to close the box after a selection is made
  closeOnClick:          false, 

  // The css width or auto for calculated based on item length
  width:                 'auto' 
  
});

Changelog:

2018-07-24

• CSS update

---

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