Select Boxes Replacement Plugin For jQuery - Select2

Select Boxes Replacement Plugin For jQuery - Select2
File Size: 477 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Select2 is a JavaScript based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. jQuery is optional.

Look and feel of Select2 is based on the excellent Chosen library.


You might also like:


  • Working with large datasets: Chosen requires the entire dataset to be loaded as option tags in the DOM, which limits it to working with small-ish datasets. Select2 uses a function to find results on-the-fly, which allows it to partially load results.
  • Paging of results: Since Select2 works with large datasets and only loads a small amount of matching results at a time it has to support paging. Select2 will call the search function when the user scrolls to the bottom of currently loaded result set allowing for the 'infinite scrolling' of results.
  • Custom markup for results: Chosen only supports rendering text results because that is the only markup supported by optiontags. Select2 provides an extension point which can be used to produce any kind of markup to represent results.
  • Ability to add results on the fly: Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for tagging.

How to use it:

1. Install & Import.

$ npm install select2 --save

2. Download and load the Select2 plugin's files in the document.

<link href="/path/to/select2.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/select2.min.js"></script>

3. Call the main function on the select element and done.

<select class="demo">
  Options here



  • Add scrollAfterSelect as a configurable option for multiselect dropdowns to allow toggling of highlightFirstItem() behaviour
  • Add scrollOnSelect as a configurable option
  • Default scrollOnSelect to true to avoid modifying existing behaviour
  • Added tests and default option for scrollAfterSelect

v4.0.5 (2017-10-25)

  • Replace autocapitalize=off with autocapitalize=none
  • More translations.

v4.0.4 (2017-09-25)

  • Make tag matching case insensitive 
  • Support selecting options with blank or 0 option values 
  • Fix issue with entire form losing focus when tabbing away from a Select2 control
  • Fix UMD support for CommonJS 
  • Add more languages

v4.0.2 (2016-03-09)

v3.5.2 (2015-01-08)

  • update.

v3.5.1 (2014-07-23)

  • update.

v3.5.0 (2014-06-17)

  • update.

v3.4.8 (2014-05-02)

  • update.

v3.4.7 (2014-05-01)

  • update.

v3.4.6 (2014-03-23)

  • update.

v3.4.5 (2013-12-08)

  • Fix for drop-auto-width collision detection and css border top.
  • better handling for ipads.

v3.4.4 (2013-10-25)

  • updated to the latest version

v3.4.3 (2013-9-17)

  • updated to the latest version

v3.4.2 (2013-8-13)

  • updated to the latest version

v3.4.1 (2013-6-28)

  • fix js error that happens when enter is pressed and there is no highlighted option.

v3.4.0 (2013-5-15)

  • Fixed MultiSelect JavaScript error - no method 'showSearch'

v3.3.1 (2013-3-26)

  • Revert "Added ajax.transport support to default options"

v3.3.1 (2013-2-21)

  • Opera implements box-shadow without a vendor prefix, so -o-box-shadow is invalid.
  • Added German translation
  • Added spanish translation
  • Added Hungarian translation

v3.3.0 (2013-2-6)

  • fix more hierarchical selection bugs.
  • pass escape markup into formatResult 

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