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 |
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
- JS & CSS update.
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.