Handy Customizable Dropdown Select Plugin With jQuery - JQSelect

JQSelect is a robust and customizable jQuery plugin for creating a dynamic, nice-looking dropdown select list that supports filtering, multiple selection with checkboxes and 'Select All' options.

How to use it:

1. Link to the jQuery JQSelect plugin and other required resources as follow:

<link rel="stylesheet" href="JQSelect.min.css"/>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="JQSelect.min.js"></script>

2. Create a button element where you want to bind the dropdown select to.

<button id="demo" type="button" class="jq-select"></button>

3. Initialize the dropdown select plugin and insert your own data into the data array / object.

$('#select1').JQSelect({
  data: [], // your data here
});

4. Customize the dropdown select with the following options.

$('#demo').JQSelect({

  // enable multi select
  multi: false,

  // enable option groups
  group: false,

  // select item value
  valueField: 'value',

  // select item display label
  displayField: 'label',

  // custom icon
  iconCls: '',
  noSelectText: 'Please select ...',

  // hide filter input
  hideFilter: false,

  // 'Select All' options
  hideSelectAll: false,
  selectAllText: 'Select All',
  deselectAllText: 'Deselect All',

  // Ok button options
  hideOKButton: false,
  okButtonText: 'OK',
  hideCloseButton: false,
  closeButtonText: 'Close'

});

5. Callback functions available.

$('#demo').JQSelect({

  onSelect: null,
  onDeselect: null,
  onChange: null,
  onOK: null,
  onClose: null

});

Change log:

2016-12-14

• bugfix

---

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