Introduction to jQuery select2 plugin
.jpg)
.jpg)
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.
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>
Compartir:
Cargando...
Artículos recientes
-
-
¿Cómo agregar un elemento a un array en JavaScript?
23 August 2022 -
Cómo agregar código JavaScript en una página HTML
20 June 2022
