Skip to content

Instantly share code, notes, and snippets.

@TheSkallywag

TheSkallywag/select2-bootstrap-4.html

Created February 27, 2018 23:39
Show Gist options
  • Save TheSkallywag/aa2f847db7c70854ce4854303578dd07 to your computer and use it in GitHub Desktop.
Save TheSkallywag/aa2f847db7c70854ce4854303578dd07 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
select2-bootstrap-4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Select2 with Bootstrap 4 theme</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<!-- Bootstrap 4 Css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"
type="text/css"/>
<!-- Select2 Css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css"
rel="stylesheet" type="text/css"/>
<!-- Select2 Bootstrap 4 theme -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"
rel="stylesheet" type="text/css"/>
<div class="container">
<div class="form-group">
<label for="single" class="control-label">Select2 single select</label>
<select id="single" class="form-control select2-single">
<option></option>
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI" disabled="disabled">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>
<option value="TNOGZ" disabled="disabled">The No Optgroup Zone</option>
<option value="TPZ">The Panic Zone</option>
<option value="TTZ">The Twilight Zone</option>
</select>
</div>
</div>
<script>
$( ".select2-single" ).select2({
theme: "bootstrap",
containerCssClass: ':all:',
placeholder: "Search by Name, School, Grad Year, City and State",
allowClear: true,
minimumInputLength: 3,
closeOnSelect: false,
templateResult: formatResult,
templateSelection: formatSelection,
cache: true
}).on('select2:select', function (e) {
var selectedElement = $(e.currentTarget);
var selectedValue = selectedElement.val();
alert(selectedValue);
});
function formatResult(item) {
if (!item.id) {
return item.text;
}
return $('<span>').html(item).append($('<i>').html(item.text));
}
function formatSelection(item) {
return 'Search by Name, School, Grad Year, City and State';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment