Atmos
Search…
Select2
We have included select2 plugin for enhanced select options. select2 is free and open source plugin you can check it here https://select2.org

Setup

Step 1

Add the plugin css before the atlas stylesheet as we have tuned it according to the scheme of our admin panel
1
<link rel="stylesheet" href="assets/vendor/select2/css/select2.min.css">
Copied!

Step 2

Include plugin Javascript file before </body>
1
<script src="assets/vendor/select2/js/select2.full.min.js" type="text/javascript"></script>
Copied!

Step 3

Add .js-select class as selector
1
<select class="form-control js-select2">
2
<option selected>Apple Pie</option>
3
<option>Cup Cake</option>
4
<option>Donut</option>
5
<option>Eclair</option>
6
<option>Froyo</option>
7
<option>GingerBread</option>
8
<option>HoneyComb</option>
9
<option>Ice Cream Sandwich</option>
10
<option>Jellybean</option>
11
<option>Kitkat</option>
12
<option>Lollipop</option>
13
<option>Marshmallow</option>
14
<option>Nougat</option>
15
<option>Oreo</option>
16
</select>
Copied!

Step 4

Initialize the plugin
1
$(".js-select2").select2();
Copied!

Select2 Tag Input

you also have multiple inputs by using multiple attribute with select tag
1
<select multiple class="form-control js-select2">
2
<option selected>Apple Pie</option>
3
<option>Cup Cake</option>
4
<option>Donut</option>
5
<option>Eclair</option>
6
<option>Froyo</option>
7
<option>GingerBread</option>
8
<option>HoneyComb</option>
9
<option>Ice Cream Sandwich</option>
10
<option>Jellybean</option>
11
<option>Kitkat</option>
12
<option>Lollipop</option>
13
<option>Marshmallow</option>
14
<option>Nougat</option>
15
<option>Oreo</option>
16
</select>
Copied!

For more options refer

Getting Started | Select2 - The jQuery replacement for select boxes
Last modified 2yr ago