Introducción al plugin select2 de jQuery
.jpg)
.jpg)
Introducción al plugin select2 de jQuery
En este post veremos el funcionamiento del plugin Select2 de JQuery que fue diseñado para reemplazar el cuadro estándar <select> de html que se muestra en el navegador. Por defecto, admite todas las opciones y operaciones que están disponibles en un cuadro de selección estándar, pero con mayor flexibilidad.
El ejemplo que muestro explica el uso básico de select2. En seguida puedes ver el ejemplo
<!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 código JavaScript en una página HTML
20 junio 2022 -
¿Cómo agregar un elemento a un array en JavaScript?
23 agosto 2022 -
Las 3 mejores formas para concatenar cadenas de texto en JavaScript
09 noviembre 2022
