Skip to content

Commit f80e235

Browse files
taglialatagliala
committed
Update demo
- Update Boostrap CSS to 4.6.0 - Update to Select2 4.1.rc0 - Add pre-selected examples - Add default select fields
1 parent a556a9d commit f80e235

File tree

2 files changed

+63
-5
lines changed

2 files changed

+63
-5
lines changed

‎docs/index.html‎

Lines changed: 62 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
65
<meta name="viewport" content="width=device-width, initial-scale=1">
76

87
<!-- bootstrap -->
9-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
8+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha256-7dA7lq5P94hkBsWdff7qobYkp9ope/L5LQy2t/ljPLo=" crossorigin="anonymous"></script>
109
<!-- select2 -->
11-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" integrity="sha256-zaSoHBhwFdle0scfGEFUCwggPN7F+ip9XRglo8IWb4w=" crossorigin="anonymous">
1211

1312
<!-- select2-bootstrap4-theme -->
1413
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css"> <!-- for live demo page -->
1514
<link href="select2-bootstrap4.css" rel="stylesheet"> <!-- for local development env -->
15+
16+
<title>Select2 Boostrap 4 Theme</title>
1617
</head>
1718

1819
<body class="pt-5" style="min-height:90vh">
@@ -22,6 +23,18 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
2223
<hr>
2324

2425
<form>
26+
<div class="form-group">
27+
<label>Reference select</label>
28+
<select class="custom-select">
29+
<option value="" hidden="hidden">Choose one thing</option>
30+
<option>1</option>
31+
<option>2</option>
32+
<option>3</option>
33+
<option>4</option>
34+
<option>5</option>
35+
</select>
36+
</div>
37+
2538
<div class="form-group">
2639
<label>Example of select</label>
2740
<select data-placeholder="Choose one thing" data-allow-clear="1">
@@ -34,6 +47,16 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
3447
</select>
3548
</div>
3649

50+
<div class="form-group">
51+
<label>Example of select (pre-selected)</label>
52+
<select data-placeholder="Choose one thing" data-allow-clear="1">
53+
<option></option>
54+
<option selected="selected">1</option>
55+
<option>2</option>
56+
<option>3</option>
57+
</select>
58+
</div>
59+
3760
<div class="form-group">
3861
<label>Example of multiple select</label>
3962
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
@@ -60,6 +83,41 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
6083
</select>
6184
</div>
6285

86+
<div class="form-group">
87+
<label>Example of multiple select (pre-selected)</label>
88+
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
89+
<option selected="selected">Tommy Yount</option>
90+
<option>Hye Panter</option>
91+
<option>Vi Yohe</option>
92+
</select>
93+
</div>
94+
95+
<div class="form-group">
96+
<label>Example of multiple select (many pre-selected)</label>
97+
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
98+
<option selected="selected">Tommy Yount</option>
99+
<option selected="selected">Hye Panter</option>
100+
<option selected="selected">Vi Yohe</option>
101+
<option selected="selected">Keva Bandy</option>
102+
<option selected="selected">Hannelore Corning</option>
103+
<option selected="selected">Delorse Whitcher</option>
104+
<option selected="selected">Katharyn Marrinan</option>
105+
<option selected="selected">Jeannine Tope</option>
106+
<option selected="selected">Jamila Braggs</option>
107+
<option selected="selected">Eden Cunniff</option>
108+
<option selected="selected">Suzy Schoen</option>
109+
<option selected="selected">Elza Mccook</option>
110+
<option selected="selected">Liana Goris</option>
111+
<option selected="selected">Pauletta Schlabach</option>
112+
<option selected="selected">Synthia Dupuis</option>
113+
<option selected="selected">Scarlett Kestler</option>
114+
<option selected="selected">Magdalen Mele</option>
115+
<option selected="selected">Susanna Schenk</option>
116+
<option selected="selected">Else Stupka</option>
117+
<option selected="selected">Pennie Khang</option>
118+
</select>
119+
</div>
120+
63121
<div class="form-group">
64122
<label>Example of disabled select</label>
65123
<select disabled data-placeholder="Cannot choose" data-allow-clear="1">
@@ -149,7 +207,7 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
149207
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
150208
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha256-7dA7lq5P94hkBsWdff7qobYkp9ope/L5LQy2t/ljPLo=" crossorigin="anonymous"></script>
151209
<!-- select2 -->
152-
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" integrity="sha256-AFAYEOkzB6iIKnTYZOdUf9FFje6lOTYdwRJKwTN5mks=" crossorigin="anonymous"></script>
210+
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" integrity="sha256-9yRP/2EFlblE92vzCA10469Ctd0jT48HnmmMw5rJZrA=" crossorigin="anonymous"></script>
153211

154212
<!-- select2-bootstrap4-theme -->
155213
<script src="script.js"></script>

‎docs/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
$(function () {
2-
$('select').each(function () {
2+
$('select:not(.custom-select)').each(function () {
33
$(this).select2({
44
theme: 'bootstrap4',
55
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',

0 commit comments

Comments
 (0)