Atmos
  • Getting Started
  • Build System
    • Gulp
      • Gulp 4
    • Page Structure
    • Sass Modules
  • UI Elements
    • Colors
    • Buttons
    • Icons
    • Cards
    • Alerts
    • Modals
    • Avatar
    • Tables
    • Mail Templates
  • forms
    • Form Layouts
    • Switch
    • Tag Input
    • Radio Box
    • Select2
    • Datepickers
    • Masked Input
    • Rangeslider
    • Dropzone Fileupload
    • Form Wizard
    • Form Validation
  • Charts
    • Charts
    • Apex Charts
    • Chartjs
    • Google Charts
    • Chartist
  • Maps
    • Google Maps
    • Vector Maps
  • Starter Template
    • blank template Markup
Powered by GitBook
On this page
  • Setup
  • Select2 Tag Input
  • For more options refer
  1. forms

Select2

PreviousRadio BoxNextDatepickers

Last updated 6 years ago

We have included select2 plugin for enhanced select options. select2 is free and open source plugin you can check it here

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

https://select2.org
Getting Started | Select2 - The jQuery replacement for select boxes
Logo