Replace Native Selects With Customizable Dropdowns - jQuery Dropzie

Dropzie is a lightweight and flexible jQuery Custom Select plugin that replaces native select boxes with customizable and filterable dropdown lists & menus.

How to use it:

1. Download the plugin and add the following JavaScript & CSS files to the page.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- dropzie Plugin Files -->
<link rel="stylesheet" href="/path/to/jquery.dropzie.css" />
<script src="/path/to/jquery.dropzie.js"></script>

2. Just attach the function dropzie()

<!-- Single Select -->
<select class="example">
  <option>Select...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  ...
</select>

<!-- Multiple Select -->
<select class="example" multiple>
  <option>Select...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  ...
</select>

$(function(){
  $('.example').dropzie();
});

3. Add custom HTML (like icons) to the beginning of the select options.

<select class="example" multiple>
  <option>Select...</option>
  <option value="1" data-html='<img src="1.svg" style="width:16px;margin-right:8px;" /> Option 1'>Option 1</option>
  <option value="1" data-html='<img src="2.svg" style="width:16px;margin-right:8px;" /> Option 2'>Option 1</option>
  <option value="1" data-html='<img src="3.svg" style="width:16px;margin-right:8px;" /> Option 3'>Option 1</option>
  ...
</select>

4. Enable a custom element to toggle the dropdown.

<a class="myCustomToggle" href="#">
  Toggle The Dropdown
</a>

<select class="example">
  <option>Select...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  ...
</select>

$('.example').dropzie({
  customToggle: $('.myCustomToggle'),
});

5. Enable & disable the live search function. Default: true.

$('.example').dropzie({
  search: true,
});

6. Determine whether to hide the first option. Use this if your first option is 'Select...' or similar. Default: true.

$('.example').dropzie({
  hideFirstOptionFromList: true,
});

7. Display the selected options as tags.

$('.example').dropzie({
  tagMode: true,
});

8. Create a custom trigger/button you'd like to use to open the dropdown.

$('.example').dropzie({
  customToggle: 'CSS Selector Here'
});

9. Trigger a function when the dropdown changes.

$('.example').dropzie({
  change: function() {
    alert('Changed!');
  }
});

Changelog:

2023-10-17

• Added Tag mode

---

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