Introduction to jQuery select2 plugin

In this post we will see the operation of the JQuery Select2 plugin that was designed to replace the standard <select> html box. By default, it supports all the options and operations that are available in a standard selection box, but with greater flexibility.


Demo

The example I show explains the basic use of select2. You can see the example:


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Select </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    
</head>
<body>
    <!--begin::Portlet-->
    <div class="container">
        <!--begin::Form-->
        <form>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Basic Example
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_1" name="param">
                            <option value="AK">
                                Alaska
                            </option>
                            <option value="HI">
                                Hawaii
                            </option>
                            <option value="CA">
                                California
                            </option>
                            <option value="NV">
                                Nevada
                            </option>
                            <option value="OR">
                                Oregon
                            </option>
                            <option value="WA">
                                Washington
                            </option>
                            <option value="AZ">
                                Arizona
                            </option>
                            <option value="CO">
                                Colorado
                            </option>
                            <option value="ID">
                                Idaho
                            </option>
                            <option value="MT">
                                Montana
                            </option>
                            <option value="NE">
                                Nebraska
                            </option>
                            <option value="NM">
                                New Mexico
                            </option>
                            <option value="ND">
                                North Dakota
                            </option>
                            <option value="UT">
                                Utah
                            </option>
                            <option value="WY">
                                Wyoming
                            </option>
                            <option value="AL">
                                Alabama
                            </option>
                            <option value="AR">
                                Arkansas
                            </option>
                            <option value="IL">
                                Illinois
                            </option>
                            <option value="IA">
                                Iowa
                            </option>
                            <option value="KS">
                                Kansas
                            </option>
                            <option value="KY">
                                Kentucky
                            </option>
                            <option value="LA">
                                Louisiana
                            </option>
                            <option value="MN">
                                Minnesota
                            </option>
                            <option value="MS">
                                Mississippi
                            </option>
                            <option value="MO">
                                Missouri
                            </option>
                            <option value="OK">
                                Oklahoma
                            </option>
                            <option value="SD">
                                South Dakota
                            </option>
                            <option value="TX">
                                Texas
                            </option>
                            <option value="TN">
                                Tennessee
                            </option>
                            <option value="WI">
                                Wisconsin
                            </option>
                            <option value="CT">
                                Connecticut
                            </option>
                            <option value="DE">
                                Delaware
                            </option>
                            <option value="FL">
                                Florida
                            </option>
                            <option value="GA">
                                Georgia
                            </option>
                            <option value="IN">
                                Indiana
                            </option>
                            <option value="ME">
                                Maine
                            </option>
                            <option value="MD">
                                Maryland
                            </option>
                            <option value="MA">
                                Massachusetts
                            </option>
                            <option value="MI">
                                Michigan
                            </option>
                            <option value="NH">
                                New Hampshire
                            </option>
                            <option value="NJ">
                                New Jersey
                            </option>
                            <option value="NY">
                                New York
                            </option>
                            <option value="NC">
                                North Carolina
                            </option>
                            <option value="OH">
                                Ohio
                            </option>
                            <option value="PA">
                                Pennsylvania
                            </option>
                            <option value="RI">
                                Rhode Island
                            </option>
                            <option value="SC">
                                South Carolina
                            </option>
                            <option value="VT">
                                Vermont
                            </option>
                            <option value="VA">
                                Virginia
                            </option>
                            <option value="WV">
                                West Virginia
                            </option>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Nested Example
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_2" name="param">
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK">
                                    Alaska
                                </option>
                                <option value="HI">
                                    Hawaii
                                </option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">
                                    California
                                </option>
                                <option value="NV" selected>
                                    Nevada
                                </option>
                                <option value="OR">
                                    Oregon
                                </option>
                                <option value="WA">
                                    Washington
                                </option>
                            </optgroup>
                            <optgroup label="Mountain Time Zone">
                                <option value="AZ">
                                    Arizona
                                </option>
                                <option value="CO">
                                    Colorado
                                </option>
                                <option value="ID">
                                    Idaho
                                </option>
                                <option value="MT">
                                    Montana
                                </option>
                                <option value="NE">
                                    Nebraska
                                </option>
                                <option value="NM">
                                    New Mexico
                                </option>
                                <option value="ND">
                                    North Dakota
                                </option>
                                <option value="UT">
                                    Utah
                                </option>
                                <option value="WY">
                                    Wyoming
                                </option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">
                                    Alabama
                                </option>
                                <option value="AR">
                                    Arkansas
                                </option>
                                <option value="IL">
                                    Illinois
                                </option>
                                <option value="IA">
                                    Iowa
                                </option>
                                <option value="KS">
                                    Kansas
                                </option>
                                <option value="KY">
                                    Kentucky
                                </option>
                                <option value="LA">
                                    Louisiana
                                </option>
                                <option value="MN">
                                    Minnesota
                                </option>
                                <option value="MS">
                                    Mississippi
                                </option>
                                <option value="MO">
                                    Missouri
                                </option>
                                <option value="OK">
                                    Oklahoma
                                </option>
                                <option value="SD">
                                    South Dakota
                                </option>
                                <option value="TX">
                                    Texas
                                </option>
                                <option value="TN">
                                    Tennessee
                                </option>
                                <option value="WI">
                                    Wisconsin
                                </option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">
                                    Connecticut
                                </option>
                                <option value="DE">
                                    Delaware
                                </option>
                                <option value="FL">
                                    Florida
                                </option>
                                <option value="GA">
                                    Georgia
                                </option>
                                <option value="IN">
                                    Indiana
                                </option>
                                <option value="ME">
                                    Maine
                                </option>
                                <option value="MD">
                                    Maryland
                                </option>
                                <option value="MA">
                                    Massachusetts
                                </option>
                                <option value="MI">
                                    Michigan
                                </option>
                                <option value="NH">
                                    New Hampshire
                                </option>
                                <option value="NJ">
                                    New Jersey
                                </option>
                                <option value="NY">
                                    New York
                                </option>
                                <option value="NC">
                                    North Carolina
                                </option>
                                <option value="OH">
                                    Ohio
                                </option>
                                <option value="PA">
                                    Pennsylvania
                                </option>
                                <option value="RI">
                                    Rhode Island
                                </option>
                                <option value="SC">
                                    South Carolina
                                </option>
                                <option value="VT">
                                    Vermont
                                </option>
                                <option value="VA">
                                    Virginia
                                </option>
                                <option value="WV">
                                    West Virginia
                                </option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Multi Select
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_3" name="param" multiple="multiple">
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK" selected>
                                    Alaska
                                </option>
                                <option value="HI">
                                    Hawaii
                                </option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">
                                    California
                                </option>
                                <option value="NV" selected>
                                    Nevada
                                </option>
                                <option value="OR">
                                    Oregon
                                </option>
                                <option value="WA">
                                    Washington
                                </option>
                            </optgroup>
                            <optgroup label="Mountain Time Zone">
                                <option value="AZ">
                                    Arizona
                                </option>
                                <option value="CO">
                                    Colorado
                                </option>
                                <option value="ID">
                                    Idaho
                                </option>
                                <option value="MT" selected>
                                    Montana
                                </option>
                                <option value="NE">
                                    Nebraska
                                </option>
                                <option value="NM">
                                    New Mexico
                                </option>
                                <option value="ND">
                                    North Dakota
                                </option>
                                <option value="UT">
                                    Utah
                                </option>
                                <option value="WY">
                                    Wyoming
                                </option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">
                                    Alabama
                                </option>
                                <option value="AR">
                                    Arkansas
                                </option>
                                <option value="IL">
                                    Illinois
                                </option>
                                <option value="IA">
                                    Iowa
                                </option>
                                <option value="KS">
                                    Kansas
                                </option>
                                <option value="KY">
                                    Kentucky
                                </option>
                                <option value="LA">
                                    Louisiana
                                </option>
                                <option value="MN">
                                    Minnesota
                                </option>
                                <option value="MS">
                                    Mississippi
                                </option>
                                <option value="MO">
                                    Missouri
                                </option>
                                <option value="OK">
                                    Oklahoma
                                </option>
                                <option value="SD">
                                    South Dakota
                                </option>
                                <option value="TX">
                                    Texas
                                </option>
                                <option value="TN">
                                    Tennessee
                                </option>
                                <option value="WI">
                                    Wisconsin
                                </option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">
                                    Connecticut
                                </option>
                                <option value="DE">
                                    Delaware
                                </option>
                                <option value="FL">
                                    Florida
                                </option>
                                <option value="GA">
                                    Georgia
                                </option>
                                <option value="IN">
                                    Indiana
                                </option>
                                <option value="ME">
                                    Maine
                                </option>
                                <option value="MD">
                                    Maryland
                                </option>
                                <option value="MA">
                                    Massachusetts
                                </option>
                                <option value="MI">
                                    Michigan
                                </option>
                                <option value="NH">
                                    New Hampshire
                                </option>
                                <option value="NJ">
                                    New Jersey
                                </option>
                                <option value="NY">
                                    New York
                                </option>
                                <option value="NC">
                                    North Carolina
                                </option>
                                <option value="OH">
                                    Ohio
                                </option>
                                <option value="PA">
                                    Pennsylvania
                                </option>
                                <option value="RI">
                                    Rhode Island
                                </option>
                                <option value="SC">
                                    South Carolina
                                </option>
                                <option value="VT">
                                    Vermont
                                </option>
                                <option value="VA">
                                    Virginia
                                </option>
                                <option value="WV">
                                    West Virginia
                                </option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Placeholder
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_4" name="param">
                            <option></option>
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK">
                                    Alaska
                                </option>
                                <option value="HI">
                                    Hawaii
                                </option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">
                                    California
                                </option>
                                <option value="NV">
                                    Nevada
                                </option>
                                <option value="OR">
                                    Oregon
                                </option>
                                <option value="WA">
                                    Washington
                                </option>
                            </optgroup>
                            <optgroup label="Mountain Time Zone">
                                <option value="AZ">
                                    Arizona
                                </option>
                                <option value="CO">
                                    Colorado
                                </option>
                                <option value="ID">
                                    Idaho
                                </option>
                                <option value="MT">
                                    Montana
                                </option>
                                <option value="NE">
                                    Nebraska
                                </option>
                                <option value="NM">
                                    New Mexico
                                </option>
                                <option value="ND">
                                    North Dakota
                                </option>
                                <option value="UT">
                                    Utah
                                </option>
                                <option value="WY">
                                    Wyoming
                                </option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">
                                    Alabama
                                </option>
                                <option value="AR">
                                    Arkansas
                                </option>
                                <option value="IL">
                                    Illinois
                                </option>
                                <option value="IA">
                                    Iowa
                                </option>
                                <option value="KS">
                                    Kansas
                                </option>
                                <option value="KY">
                                    Kentucky
                                </option>
                                <option value="LA">
                                    Louisiana
                                </option>
                                <option value="MN">
                                    Minnesota
                                </option>
                                <option value="MS">
                                    Mississippi
                                </option>
                                <option value="MO">
                                    Missouri
                                </option>
                                <option value="OK">
                                    Oklahoma
                                </option>
                                <option value="SD">
                                    South Dakota
                                </option>
                                <option value="TX">
                                    Texas
                                </option>
                                <option value="TN">
                                    Tennessee
                                </option>
                                <option value="WI">
                                    Wisconsin
                                </option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">
                                    Connecticut
                                </option>
                                <option value="DE">
                                    Delaware
                                </option>
                                <option value="FL">
                                    Florida
                                </option>
                                <option value="GA">
                                    Georgia
                                </option>
                                <option value="IN">
                                    Indiana
                                </option>
                                <option value="ME">
                                    Maine
                                </option>
                                <option value="MD">
                                    Maryland
                                </option>
                                <option value="MA">
                                    Massachusetts
                                </option>
                                <option value="MI">
                                    Michigan
                                </option>
                                <option value="NH">
                                    New Hampshire
                                </option>
                                <option value="NJ">
                                    New Jersey
                                </option>
                                <option value="NY">
                                    New York
                                </option>
                                <option value="NC">
                                    North Carolina
                                </option>
                                <option value="OH">
                                    Ohio
                                </option>
                                <option value="PA">
                                    Pennsylvania
                                </option>
                                <option value="RI">
                                    Rhode Island
                                </option>
                                <option value="SC">
                                    South Carolina
                                </option>
                                <option value="VT">
                                    Vermont
                                </option>
                                <option value="VA">
                                    Virginia
                                </option>
                                <option value="WV">
                                    West Virginia
                                </option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Array Data
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_5" name="param">
                            <option value="2" selected="selected">
                                Duplicate
                            </option>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Remote Data
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_6" name="param">
                            <option></option>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Disabled Mode
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_7" disabled name="param">
                            <option></option>
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK">
                                    Alaska
                                </option>
                                <option value="HI">
                                    Hawaii
                                </option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">
                                    California
                                </option>
                                <option value="NV" selected>
                                    Nevada
                                </option>
                                <option value="OR">
                                    Oregon
                                </option>
                                <option value="WA">
                                    Washington
                                </option>
                            </optgroup>
                            <optgroup label="Mountain Time Zone">
                                <option value="AZ">
                                    Arizona
                                </option>
                                <option value="CO">
                                    Colorado
                                </option>
                                <option value="ID">
                                    Idaho
                                </option>
                                <option value="MT">
                                    Montana
                                </option>
                                <option value="NE">
                                    Nebraska
                                </option>
                                <option value="NM">
                                    New Mexico
                                </option>
                                <option value="ND">
                                    North Dakota
                                </option>
                                <option value="UT">
                                    Utah
                                </option>
                                <option value="WY">
                                    Wyoming
                                </option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">
                                    Alabama
                                </option>
                                <option value="AR">
                                    Arkansas
                                </option>
                                <option value="IL">
                                    Illinois
                                </option>
                                <option value="IA">
                                    Iowa
                                </option>
                                <option value="KS">
                                    Kansas
                                </option>
                                <option value="KY">
                                    Kentucky
                                </option>
                                <option value="LA">
                                    Louisiana
                                </option>
                                <option value="MN">
                                    Minnesota
                                </option>
                                <option value="MS">
                                    Mississippi
                                </option>
                                <option value="MO">
                                    Missouri
                                </option>
                                <option value="OK">
                                    Oklahoma
                                </option>
                                <option value="SD">
                                    South Dakota
                                </option>
                                <option value="TX">
                                    Texas
                                </option>
                                <option value="TN">
                                    Tennessee
                                </option>
                                <option value="WI">
                                    Wisconsin
                                </option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">
                                    Connecticut
                                </option>
                                <option value="DE">
                                    Delaware
                                </option>
                                <option value="FL">
                                    Florida
                                </option>
                                <option value="GA">
                                    Georgia
                                </option>
                                <option value="IN">
                                    Indiana
                                </option>
                                <option value="ME">
                                    Maine
                                </option>
                                <option value="MD">
                                    Maryland
                                </option>
                                <option value="MA">
                                    Massachusetts
                                </option>
                                <option value="MI">
                                    Michigan
                                </option>
                                <option value="NH">
                                    New Hampshire
                                </option>
                                <option value="NJ">
                                    New Jersey
                                </option>
                                <option value="NY">
                                    New York
                                </option>
                                <option value="NC">
                                    North Carolina
                                </option>
                                <option value="OH">
                                    Ohio
                                </option>
                                <option value="PA">
                                    Pennsylvania
                                </option>
                                <option value="RI">
                                    Rhode Island
                                </option>
                                <option value="SC">
                                    South Carolina
                                </option>
                                <option value="VT">
                                    Vermont
                                </option>
                                <option value="VA">
                                    Virginia
                                </option>
                                <option value="WV">
                                    West Virginia
                                </option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Disabled Results
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_8" name="param">
                            <option></option>
                            <option value="one">
                                First
                            </option>
                            <option value="two" disabled="disabled">
                                Second (disabled)
                            </option>
                            <option value="three">
                                Third
                            </option>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Limiting Selections
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_9" name="param" multiple>
                            <option></option>
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK">
                                    Alaska
                                </option>
                                <option value="HI">
                                    Hawaii
                                </option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">
                                    California
                                </option>
                                <option value="NV" selected>
                                    Nevada
                                </option>
                                <option value="OR">
                                    Oregon
                                </option>
                                <option value="WA">
                                    Washington
                                </option>
                            </optgroup>
                            <optgroup label="Mountain Time Zone">
                                <option value="AZ">
                                    Arizona
                                </option>
                                <option value="CO">
                                    Colorado
                                </option>
                                <option value="ID">
                                    Idaho
                                </option>
                                <option value="MT">
                                    Montana
                                </option>
                                <option value="NE">
                                    Nebraska
                                </option>
                                <option value="NM">
                                    New Mexico
                                </option>
                                <option value="ND">
                                    North Dakota
                                </option>
                                <option value="UT">
                                    Utah
                                </option>
                                <option value="WY">
                                    Wyoming
                                </option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">
                                    Alabama
                                </option>
                                <option value="AR">
                                    Arkansas
                                </option>
                                <option value="IL">
                                    Illinois
                                </option>
                                <option value="IA">
                                    Iowa
                                </option>
                                <option value="KS">
                                    Kansas
                                </option>
                                <option value="KY">
                                    Kentucky
                                </option>
                                <option value="LA">
                                    Louisiana
                                </option>
                                <option value="MN">
                                    Minnesota
                                </option>
                                <option value="MS">
                                    Mississippi
                                </option>
                                <option value="MO">
                                    Missouri
                                </option>
                                <option value="OK">
                                    Oklahoma
                                </option>
                                <option value="SD">
                                    South Dakota
                                </option>
                                <option value="TX">
                                    Texas
                                </option>
                                <option value="TN">
                                    Tennessee
                                </option>
                                <option value="WI">
                                    Wisconsin
                                </option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">
                                    Connecticut
                                </option>
                                <option value="DE">
                                    Delaware
                                </option>
                                <option value="FL">
                                    Florida
                                </option>
                                <option value="GA">
                                    Georgia
                                </option>
                                <option value="IN">
                                    Indiana
                                </option>
                                <option value="ME">
                                    Maine
                                </option>
                                <option value="MD">
                                    Maryland
                                </option>
                                <option value="MA">
                                    Massachusetts
                                </option>
                                <option value="MI">
                                    Michigan
                                </option>
                                <option value="NH">
                                    New Hampshire
                                </option>
                                <option value="NJ">
                                    New Jersey
                                </option>
                                <option value="NY">
                                    New York
                                </option>
                                <option value="NC">
                                    North Carolina
                                </option>
                                <option value="OH">
                                    Ohio
                                </option>
                                <option value="PA">
                                    Pennsylvania
                                </option>
                                <option value="RI">
                                    Rhode Island
                                </option>
                                <option value="SC">
                                    South Carolina
                                </option>
                                <option value="VT">
                                    Vermont
                                </option>
                                <option value="VA">
                                    Virginia
                                </option>
                                <option value="WV">
                                    West Virginia
                                </option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Hiding Search box
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_10" name="param">
                            <option></option>
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK">
                                    Alaska
                                </option>
                                <option value="HI">
                                    Hawaii
                                </option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">
                                    California
                                </option>
                                <option value="NV">
                                    Nevada
                                </option>
                                <option value="OR">
                                    Oregon
                                </option>
                                <option value="WA">
                                    Washington
                                </option>
                            </optgroup>
                            <optgroup label="Mountain Time Zone">
                                <option value="AZ">
                                    Arizona
                                </option>
                                <option value="CO">
                                    Colorado
                                </option>
                                <option value="ID">
                                    Idaho
                                </option>
                                <option value="MT">
                                    Montana
                                </option>
                                <option value="NE">
                                    Nebraska
                                </option>
                                <option value="NM">
                                    New Mexico
                                </option>
                                <option value="ND">
                                    North Dakota
                                </option>
                                <option value="UT">
                                    Utah
                                </option>
                                <option value="WY">
                                    Wyoming
                                </option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">
                                    Alabama
                                </option>
                                <option value="AR">
                                    Arkansas
                                </option>
                                <option value="IL">
                                    Illinois
                                </option>
                                <option value="IA">
                                    Iowa
                                </option>
                                <option value="KS">
                                    Kansas
                                </option>
                                <option value="KY">
                                    Kentucky
                                </option>
                                <option value="LA">
                                    Louisiana
                                </option>
                                <option value="MN">
                                    Minnesota
                                </option>
                                <option value="MS">
                                    Mississippi
                                </option>
                                <option value="MO">
                                    Missouri
                                </option>
                                <option value="OK">
                                    Oklahoma
                                </option>
                                <option value="SD">
                                    South Dakota
                                </option>
                                <option value="TX">
                                    Texas
                                </option>
                                <option value="TN">
                                    Tennessee
                                </option>
                                <option value="WI">
                                    Wisconsin
                                </option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">
                                    Connecticut
                                </option>
                                <option value="DE">
                                    Delaware
                                </option>
                                <option value="FL">
                                    Florida
                                </option>
                                <option value="GA">
                                    Georgia
                                </option>
                                <option value="IN">
                                    Indiana
                                </option>
                                <option value="ME">
                                    Maine
                                </option>
                                <option value="MD">
                                    Maryland
                                </option>
                                <option value="MA">
                                    Massachusetts
                                </option>
                                <option value="MI">
                                    Michigan
                                </option>
                                <option value="NH">
                                    New Hampshire
                                </option>
                                <option value="NJ">
                                    New Jersey
                                </option>
                                <option value="NY">
                                    New York
                                </option>
                                <option value="NC">
                                    North Carolina
                                </option>
                                <option value="OH">
                                    Ohio
                                </option>
                                <option value="PA">
                                    Pennsylvania
                                </option>
                                <option value="RI">
                                    Rhode Island
                                </option>
                                <option value="SC">
                                    South Carolina
                                </option>
                                <option value="VT">
                                    Vermont
                                </option>
                                <option value="VA">
                                    Virginia
                                </option>
                                <option value="WV">
                                    West Virginia
                                </option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Tagging Support
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <select class="form-control m-select2" id="m_select2_11" multiple name="param">
                            <option></option>
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK">
                                    Alaska
                                </option>
                                <option value="HI">
                                    Hawaii
                                </option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">
                                    California
                                </option>
                                <option value="NV">
                                    Nevada
                                </option>
                                <option value="OR">
                                    Oregon
                                </option>
                                <option value="WA">
                                    Washington
                                </option>
                            </optgroup>
                            <optgroup label="Mountain Time Zone">
                                <option value="AZ">
                                    Arizona
                                </option>
                                <option value="CO">
                                    Colorado
                                </option>
                                <option value="ID">
                                    Idaho
                                </option>
                                <option value="MT">
                                    Montana
                                </option>
                                <option value="NE">
                                    Nebraska
                                </option>
                                <option value="NM">
                                    New Mexico
                                </option>
                                <option value="ND">
                                    North Dakota
                                </option>
                                <option value="UT">
                                    Utah
                                </option>
                                <option value="WY">
                                    Wyoming
                                </option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">
                                    Alabama
                                </option>
                                <option value="AR">
                                    Arkansas
                                </option>
                                <option value="IL">
                                    Illinois
                                </option>
                                <option value="IA">
                                    Iowa
                                </option>
                                <option value="KS">
                                    Kansas
                                </option>
                                <option value="KY">
                                    Kentucky
                                </option>
                                <option value="LA">
                                    Louisiana
                                </option>
                                <option value="MN">
                                    Minnesota
                                </option>
                                <option value="MS">
                                    Mississippi
                                </option>
                                <option value="MO">
                                    Missouri
                                </option>
                                <option value="OK">
                                    Oklahoma
                                </option>
                                <option value="SD">
                                    South Dakota
                                </option>
                                <option value="TX">
                                    Texas
                                </option>
                                <option value="TN">
                                    Tennessee
                                </option>
                                <option value="WI">
                                    Wisconsin
                                </option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">
                                    Connecticut
                                </option>
                                <option value="DE">
                                    Delaware
                                </option>
                                <option value="FL">
                                    Florida
                                </option>
                                <option value="GA">
                                    Georgia
                                </option>
                                <option value="IN">
                                    Indiana
                                </option>
                                <option value="ME">
                                    Maine
                                </option>
                                <option value="MD">
                                    Maryland
                                </option>
                                <option value="MA">
                                    Massachusetts
                                </option>
                                <option value="MI">
                                    Michigan
                                </option>
                                <option value="NH">
                                    New Hampshire
                                </option>
                                <option value="NJ">
                                    New Jersey
                                </option>
                                <option value="NY">
                                    New York
                                </option>
                                <option value="NC">
                                    North Carolina
                                </option>
                                <option value="OH">
                                    Ohio
                                </option>
                                <option value="PA">
                                    Pennsylvania
                                </option>
                                <option value="RI">
                                    Rhode Island
                                </option>
                                <option value="SC">
                                    South Carolina
                                </option>
                                <option value="VT">
                                    Vermont
                                </option>
                                <option value="VA">
                                    Virginia
                                </option>
                                <option value="WV">
                                    West Virginia
                                </option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Custom Styles
                    </label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <div class="m-select2 m-select2--pill">
                            <select class="form-control m-select2" id="m_select2_12_1" name="param" data-placeholder="Pill style">
                                <option></option>
                                <option value="AK">
                                    Option 1
                                </option>
                                <option value="AK">
                                    Option 2
                                </option>
                                <option value="AK">
                                    Option 3
                                </option>
                                <option value="AK">
                                    Option 4
                                </option>
                                <option value="AK">
                                    Option 5
                                </option>
                            </select>
                        </div>
                        <div class="m--space-10"></div>
                        <div class="m-select2 m-select2--air">
                            <select class="form-control m-select2" id="m_select2_12_2" name="param" data-placeholder="Air style">
                                <option></option>
                                <option value="AK">
                                    Option 1
                                </option>
                                <option value="AK">
                                    Option 2
                                </option>
                                <option value="AK">
                                    Option 3
                                </option>
                                <option value="AK">
                                    Option 4
                                </option>
                                <option value="AK">
                                    Option 5
                                </option>
                            </select>
                        </div>
                        <div class="m--space-10"></div>
                        <div class="m-select2 m-select2--air m-select2--pill">
                            <select class="form-control m-select2" id="m_select2_12_3" name="param" data-placeholder="Air & pill styles">
                                <option></option>
                                <option value="AK">
                                    Option 1
                                </option>
                                <option value="AK">
                                    Option 2
                                </option>
                                <option value="AK">
                                    Option 3
                                </option>
                                <option value="AK">
                                    Option 4
                                </option>
                                <option value="AK">
                                    Option 5
                                </option>
                            </select>
                        </div>
                        <div class="m--space-10"></div>
                        <div class="m-select2 m-select2--square">
                            <select class="form-control m-select2" id="m_select2_12_4" name="param" data-placeholder="Square style">
                                <option></option>
                                <option value="AK">
                                    Option 1
                                </option>
                                <option value="AK">
                                    Option 2
                                </option>
                                <option value="AK">
                                    Option 3
                                </option>
                                <option value="AK">
                                    Option 4
                                </option>
                                <option value="AK">
                                    Option 5
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
              
        </form>
        <!--end::Form-->
    </div>
    <!--end::Portlet-->
<script>
    var Select2 = function () {
        //== Private functions
        var demos = function () {
            // basic
            $('#m_select2_1').select2();


            // nested
            $('#m_select2_2, #m_select2_2_validate').select2({
                placeholder: "Select a state"
            });

            // multi select
            $('#m_select2_3, #m_select2_3_validate').select2({
                placeholder: "Select a state",
            });

            // basic
            $('#m_select2_4').select2({
                placeholder: "Select a state",
                allowClear: true
            });

            // loading data from array
            var data = [{
                id: 0,
                text: 'Enhancement'
            }, {
                id: 1,
                text: 'Bug'
            }, {
                id: 2,
                text: 'Duplicate'
            }, {
                id: 3,
                text: 'Invalid'
            }, {
                id: 4,
                text: 'Wontfix'
            }];

            $('#m_select2_5').select2({
                placeholder: "Select a value",
                data: data
            });

            // loading remote data

            function formatRepo(repo) {
                if (repo.loading) return repo.text;
                var markup = "<div class='select2-result-repository clearfix'>" +
                    "<div class='select2-result-repository__meta'>" +
                    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
                if (repo.description) {
                    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
                }
                markup += "<div class='select2-result-repository__statistics'>" +
                    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
                    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
                    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
                    "</div>" +
                    "</div></div>";
                return markup;
            }

            function formatRepoSelection(repo) {
                return repo.full_name || repo.text;
            }

            $("#m_select2_6").select2({
                placeholder: "Search for git repositories",
                allowClear: true,
                ajax: {
                    url: "https://api.github.com/search/repositories",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite
                        // scrolling can be used
                        params.page = params.page || 1;

                        return {
                            results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength: 1,
                templateResult: formatRepo, // omitted for brevity, see the source of this page
                templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
            });

            // custom styles

            // tagging support
            $('#m_select2_12_1, #m_select2_12_2, #m_select2_12_3, #m_select2_12_4').select2({
                placeholder: "Select an option",
            });

            // disabled mode
            $('#m_select2_7').select2({
                placeholder: "Select an option"
            });

            // disabled results
            $('#m_select2_8').select2({
                placeholder: "Select an option"
            });

            // limiting the number of selections
            $('#m_select2_9').select2({
                placeholder: "Select an option",
                maximumSelectionLength: 2
            });

            // hiding the search box
            $('#m_select2_10').select2({
                placeholder: "Select an option",
                minimumResultsForSearch: Infinity
            });

            // tagging support
            $('#m_select2_11').select2({
                placeholder: "Add a tag",
                tags: true
            });

            // disabled results
            
        }

       
        //== Public functions
        return {
            init: function () {
                demos();       
            }
        };
    }();

    //== Initialization
    jQuery(document).ready(function () {
        Select2.init();
    });
</script>
</body>

</html>

 

Artículos relacionados
0 Comentarios
Enviame un comentario