Select2.js is the simple jQuery plugin that provides customized select drop-down box in html form. Select2 also provides many utilities like searching, themes, dynamic data, infinite scrolling, tagging and remote data sets etc. of results.
In this article, I will show you how to use Select2.js and use in your web application.
Installation
Select2.js is based on jQuery, so we also need to include jQuery in the project. So include this jQuery CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
If you are using bower component tool, then create a new bower.json file and add the bellow code in it.
"dependencies": {
"select2": "~4.0"
}
And then run command bower install and it will be downloaded. Main select2 file is located at bellow folder. So include these files in the project.
<link href="vendor/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="vendor/select2/dist/js/select2.min.js"></script>
Alternatively you can also use bellow CDN file without downloading, just include these lines in the project.
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
You can also manually download the select2 package from GitHub and use in your html form.
Usage
To use select2 js,
<select class="select2" name="state">
<option value="newyork">New York</option>
<option value="seattle">Seattle</option>
</select>
And put bellow jQuery code just before end of the </body> tag
<script type="text/javascript">
$(document).ready(function() {
$('.select2').select2();
});
</script>
For multiselect dropdown, use multiple attribute to <select> tag
<select class="select2" name="state" multiple="multiple">
<option value="newyork">New York</option>
<option value="seattle">Seattle</option>
</select>
Js will be same as
<script type="text/javascript">
$(document).ready(function() {
$('.select2').select2();
});
</script>
Add extra Option
You can add object of extra options in select2() method.
Put this for placeholder
$('.select2').select2({
placeholder: 'Select a City'
});
You can also group <option> element by putting them in <optgroup> tag
<select>
<optgroup label="Northern America">
<option value="newyork">New York</option>
<option value="seattle">Seattle</option>
</optgroup>
<optgroup label="Asia">
<option value="hongkong">Hong Kong</option>
</optgroup>
</select>
You can disable certain <option> tag by adding disabled attribute to <option> tag.
<select>
<option value="newyork">New York</option>
<option value="seattle" disabled="disabled">Seattle</option>
<option value="hongkong">Hong Kong</option>
</select>
Select2 can also load data from AJAX request. Just put <select> option blank and use the bellow code in <script> tag.
$('.select2').select2({
ajax: {
url: 'https://website.com/api/get-data',
dataType: 'json'
}
});
Select2 can also load data from local array.
var data = [
{
id: 0,
text: 'New York'
},
{
id: 1,
text: 'Seattle'
},
{
id: 2,
text: 'Hing Kong'
}
];
$(".select2").select2({
data: data
});
Sometimes you want to load default options for all of Select2 in your web application. Then you can set default Global values by calling $.fn.select2.defaults.set("key", "value");
$.fn.select2.defaults.set("theme", "classic");
You can reset default values by calling:
$.fn.select2.defaults.reset();
Here is the complete list of all options that you can pass in the Select2 js.
I hope it will help you.
