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
10 cosas impresionantes que se construyeron con CSS
10 cosas impresionantes que se construyeron con CSS

Contrariamente a la creencia popular, CSS no s

¿Para qué sirve el método attr() de jQuery?
¿Para qué sirve el método attr() de jQuery?

El m&eacute;todo jQuery attr() sirve para acce

How to get the latitude and longitude of Draggable pin for Google Maps
How to get the latitude and longitude of Draggable pin for Google Maps

The Google Maps API offers a wide range of fun

0 Comentarios
Enviame un comentario