Pangong
  • Getting Started
  • Change log
  • Introduction
    • Installation
    • NPM
    • SASS
    • Grunt
    • API Reference
    • Browser Support
    • Jquery 3.3.1
    • Bootstrap 4.1.3
  • Menu Styles
    • Vertical Menu Style
    • Horizontal Menu Style
    • Horizontal Menu with Top nav
  • Application
    • Chat
    • Calendar
    • Email
  • Social Feed
    • Twitter Feed
  • components
    • Gallery
    • Activity
    • Embeds
    • Colors
  • forms
    • Toggles
    • Range slider
    • Select2
    • Input Spinner
    • Date Picker
    • Color Picker
    • Editor
  • Tables
    • Data Table
    • Responsive Table (tablesaw)
    • Editable Table
  • Charts
    • Morris Chart
    • E-Charts
    • Sparkline Chart
    • Peity Charts
    • Easy Pie Chart
  • Maps
    • Vector Map
    • Google Map
  • ...
    • Credits
Powered by GitBook
On this page
  • Introduction
  • How to Setup
  • HTML Structure
  • Dependency
  • CSS
  • JS
  • Initialize Select2 JS

Was this helpful?

  1. forms

Select2

PreviousRange sliderNextInput Spinner

Last updated 6 years ago

Was this helpful?

Introduction

gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

How to Setup

HTML Structure

<select class="form-control select2">
    <option>Select</option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
 </select>

Dependency

CSS

<!-- select2 CSS -->
<link href="vendors/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css" />

JS

<!-- Select2 JavaScript -->
<script src="vendors/select2/dist/js/select2.full.min.js"></script>
<script src="dist/js/select2-data.js"></script>

Initialize Select2 JS

/* Select2 Init*/
"use strict";
$(".select2").select2();
$("#input_tags").select2({
    tags: true,
    tokenSeparators: [',', ' ']
});
Select2