<select> popovers

A jQuery plugin to replace the traditional <select> box with a sleek Popover with options pre-populated. Better User interface than any other multiselects

Amazing Features out of the box

Sync with original select

Maximum Allowed options

Auto-growing textarea.

Works with Bootstrap

Easy methods and options

Preselect multiple values

Delete Key Support

Multiple Direction Popovers

MIT Licensed, Open Source

Examples

#1: Max Allowed upto 2


$('#example1').popSelect({
  showTitle: false,
  maxAllowed: 2
});

#2: Popover placed at the bottom


$('#example2').popSelect({
  showTitle: false,
  placeholderText: 'Click to Add More',
  position: 'bottom'
});

#3: Pre-Populated values


$('#example3').popSelect({
  showTitle: false
});


<select id="example3" multiple>
  <option value="game-of-thrones">Game Of Thrones</option>
  <option value="prison-break">Prison Break</option>
  <option value="lost">Lost</option>
  <option value="sherlock-holmes" selected="selected">Sherlock Holmes</option>
  <option value="true-detectives" selected="selected">True Detectives</option>
</select>

Options

Parameter	Type	Default Value	Description
width	number	reads from elem	The Width of the new textarea that is generated. It reads the default from the select but can be overwritten by passing in width param
position	string	'top'	Currently Supports top and bottom positions
maxAllowed	number	0	The maximum number of tags that are allowed inside the textarea. After which the tags inside the popover are disabled. Keep 0 removing any limit
autofocus	boolean	false	When the document is initilized it will autotomaticallu open up the popover and focus the textarea
autoIncrease	boolean	true	Automatically increases and decreases the height of the textarea placeholder
showTitle	boolean	false	Whether to show a Title in the popover box
showTitle	boolean	false	Whether to show a Title in the popover box
placeholderText	string	'Click to Add Values'	The Placeholder text that is shown in the texarea before the tags are clicked
debug	boolean	false	If true, then it shows debug message in the console. Should only be used in developer console.