Multiple Element Picker Plugin For jQuery - multiPicker

File Size: 19.3 KB
Views Total: 1870
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Multiple Element Picker Plugin For jQuery - multiPicker

multiPicker is a tiny jQuery plugin to create a generic picker interface which enables you to select multiple elements like a range picker.

How to use it:

1. Load the latest version of jQuery library and the jQuery multiPicker plugin's files in the html document.

<link rel="stylesheet" href="multipicker.css"></script>

<script src="//"></script>
<script src="multipicker.js"></script>

2. The HTML to create a basic date range picker.

<ul id="checklist" class="checklist">
  <li data-value="Sunday">Su</li>
  <li data-value="Monday">Mo</li>
  <li data-value="Tuesday">Tu</li>
  <li data-value="Wednesday">We</li>
  <li data-value="Thursday">Th</li>
  <li data-value="Friday">Fr</li>
  <li data-value="Saturday">Sa</li>

<input type="hidden" name="multi-picker" value="">

3. Initialize the picker plugin.


  // input name
  inputName: "multi-picker",// default 

  // text, index, or html attribute, default index
  valueSource: "text",        

  // array or single value
  prePopulate: ["Tu"],  

  // is a single picker?
  isSingle: false,  

  // callbacks   
  onInit: function() {
    // do something

  onSelect: function(item, value) {
    // do something

  onUnselect: function(item, value) {
    // do something

Change logs:


  • Minor optimization in selectors


  • Prevent scroll for touch devices while selecting picker items.


  • added touch support.


  • Replaced Object.assign by $.extend to resolve IE compatibility issue


  • JS rebuild


  • bugfix


  • Enable initialization using any jquery selector (not only an id), bulk initialize.


  • Added styles to prevent text selection on mac/ios devices


  • Make it possible to add disabled items with disabled property, not only inputs disabled attribute.
  • Fix disabled string for checkboxes bug.


  • Minor optimization in update classes method.


  • v1.0.1: Added compressed versions of .css and .js, refactor.


  • Added generate styles functionality which allows to specify css custom styles for picker and its elements.


  • Make it possible to replace ul / li with other container / item tags, add basic css sizes( small, medium, large), add css quadratic option, create new input if not found, instead of throw warning, refactor.


  • Added crossbrowser mouse pressed event handling, bug fix


  • bug fix


  • Call select on mouse move bug fix

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