Atmos
Search
K

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
<link rel="stylesheet" href="assets/vendor/select2/css/select2.min.css">

Step 2

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

Step 3

Add .js-select class as selector
<select class="form-control js-select2">
<option selected>Apple Pie</option>
<option>Cup Cake</option>
<option>Donut</option>
<option>Eclair</option>
<option>Froyo</option>
<option>GingerBread</option>
<option>HoneyComb</option>
<option>Ice Cream Sandwich</option>
<option>Jellybean</option>
<option>Kitkat</option>
<option>Lollipop</option>
<option>Marshmallow</option>
<option>Nougat</option>
<option>Oreo</option>
</select>

Step 4

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

Select2 Tag Input

you also have multiple inputs by using multiple attribute with select tag
<select multiple class="form-control js-select2">
<option selected>Apple Pie</option>
<option>Cup Cake</option>
<option>Donut</option>
<option>Eclair</option>
<option>Froyo</option>
<option>GingerBread</option>
<option>HoneyComb</option>
<option>Ice Cream Sandwich</option>
<option>Jellybean</option>
<option>Kitkat</option>
<option>Lollipop</option>
<option>Marshmallow</option>
<option>Nougat</option>
<option>Oreo</option>
</select>

For more options refer