🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Forms Plugins

Documentation

PopSelect jQuery plugin

select popovers

A simple to use jQuery plugin to create popover boxes over select input tags. A radically new way to select multiselect.

Basic Usage

  1. Include jQuery:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  2. Install popSelect using bower or directly from git.

    bower install popSelect

    or

    npm install popselect

    or

    download

  3. Include plugin's js code:

    <link rel="stylesheet" href="css/popSelect.css"> <script src="js/jquery.popSelect.min.js"></script>
  4. Call the plugin:

    Conside the following select tag.

    <select class="form-control" name="city" id="element" multiple> 	<option value="green">Green</option> 	<option value="red">Red</option> 	<option value="blue">Blue</option> 	<option value="violet">Violet</option> 	<option value="orange">Orange</option> 	<option value="white" selected="selected">White</option> </select>
    $(function() { 	$("#myselect").popSelect({ 		showTitle: false, 		maxAllowed: 4 	}); });

Examples

Options

TODO

  • Add support for setting selected='selected' inside multiple select
  • Add support for autofocus option for the select.
  • Add support for initial selected values
  • Add option for general placeholder.
  • Add support for getting value from select.
  • Add support for backspace delete
  • Add support for multidirectional popovers.
  • Auto-growing textarea
  • Add Support for setting maxAllowed input tags
  • Add support for populating the values from a different source
  • Add support for easy theming.
  • Add Sorting Options
  • Better Touch Handling

License

MIT License © Jay Kanakiya


You May Also Like