Sleek jQuery Popover Multi Select Plugin - popSelect

File Size: 911 KB
Views Total: 3749
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Sleek jQuery Popover Multi Select Plugin - popSelect

popSelect is a jQuery multi select plugin which enable the visitor to select multiple options from a sleek popover with options pre-populated.

Features:

  • Replace the traditional <select> box with a sleek looking Popover.
  • Fully responsive, works great out of the box, easily themeable, integrates with bootstrap easily.
  • Great for creating an user-friendly tags input.

Basic usage:

1. Include the jQuery popSelect's stylesheet popSelect.css in the head section.

<link href="css/popSelect.css" rel="stylesheet">

2. Create a normal Html select on your webpage.

<select name="demo" id="demo">
  <option value="India">India</option>
  <option value="US">U.S.</option>
  <option value="Germany">Germany</option>
  <option value="UK">UK</option>
  <option value="Austrailia">Austrailia</option>
</select>

3. Include jQuery JavaScript library and the Query popSelect's script popSelect.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jquery.popSelect.js"></script>

4. Call the function on the select element to initialize the plugin.

$('#demo').popSelect();

5. Change the title of the popover.

$('#demo').popSelect({title: 'Select Multiple Options'});

6. All default options.

position: 'top',
showTitle: true,
autoIncrease: true,
title: 'Select Multiple Options',
debug: false,
maxAllowed: 0,
placeholderText: 'Click to Add Values',
autofocus: false

Change logs:

2016-06-04

  • Bugfix: Multiple tags preselected - issue whith height adjustment

2015-07-11

  • Bugfix: Placeholder input should be readonly

2015-07-08

2015-07-06

  • Feature: Sync with original select element

2015-07-05

  • Added option for placeholder Text
  • Add support for preselected values

2015-07-01

  • Added option for position setting of popSelect

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