Replace Native Selects With Customizable Dropdowns - jQuery Dropzie

Replace Native Selects With Customizable Dropdowns - jQuery Dropzie
File Size: 7.33 KB
Views Total: 335
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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. Trigger a function when the dropdown changes.

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

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