In order to use Select2, you must include the JavaScript and CSS file on your website. You can get these files built for you from many different locations.
Select2 is hosted on both the cdnjs and jsDelivr CDNs, allowing you to quickly include Select2 on your website.
Include the following lines of code in the <head>
section of your HTML.
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
Initialize Select2 on the <select> element that you
want to make awesome.
<script type="text/javascript">
$('select').select2();
</script>
In some situations, you can't use Select2 from a CDN and you must include the files through your own static file servers.
Download the code
from GitHub and copy the dist directory to your project.
Include the following lines of code in the <head>
section of your HTML.
<link href="path/to/select2.min.css" rel="stylesheet" /> <script src="path/to/select2.min.js"></script>
Select2 provides multiple builds that are tailored to different environments where it is going to be used. If you think you need to use Select2 in a nonstandard environment, like when you are using AMD, you should read over the list below.
| Build name | When you should use it |
|---|---|
Standard (select2.js / select2.min.js)
|
This is the build that most people should be using for Select2. It includes the most commonly used features. |
Full (select2.full.js / select2.full.min.js)
|
You should only use this build if you need the additional features from Select2, like the compatibility modules or recommended includes like jquery.mousewheel |