Skip to content

Commit

Permalink
Update demo
Browse files Browse the repository at this point in the history 
- Update Boostrap CSS to 4.6.0
- Update to Select2 4.1.rc0
- Add pre-selected examples
- Add default select fields
  • Loading branch information
@tagliala
tagliala committed Mar 2, 2021
1 parent a556a9d commit b06f529
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 5 deletions.
66 changes: 62 additions & 4 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,18 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha256-T/zFmO5s/0aSwc6ics2KLxlfbewyRz6UNw1s3Ppf5gE=" crossorigin="anonymous">
<!-- select2 -->
<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">
<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">

<!-- select2-bootstrap4-theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css"> <!-- for live demo page -->
<link href="select2-bootstrap4.css" rel="stylesheet"> <!-- for local development env -->

<title>Select2 Boostrap 4 Theme</title>
</head>

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

<form>
<div class="form-group">
<label>Reference select</label>
<select class="custom-select">
<option value="" hidden="hidden">Choose one thing</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>

<div class="form-group">
<label>Example of select</label>
<select data-placeholder="Choose one thing" data-allow-clear="1">
Expand All @@ -34,6 +47,16 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
</select>
</div>

<div class="form-group">
<label>Example of select (pre-selected)</label>
<select data-placeholder="Choose one thing" data-allow-clear="1">
<option></option>
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
</select>
</div>

<div class="form-group">
<label>Example of multiple select</label>
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
Expand All @@ -60,6 +83,41 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
</select>
</div>

<div class="form-group">
<label>Example of multiple select (pre-selected)</label>
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
<option selected="selected">Tommy Yount</option>
<option>Hye Panter</option>
<option>Vi Yohe</option>
</select>
</div>

<div class="form-group">
<label>Example of multiple select (many pre-selected)</label>
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
<option selected="selected">Tommy Yount</option>
<option selected="selected">Hye Panter</option>
<option selected="selected">Vi Yohe</option>
<option selected="selected">Keva Bandy</option>
<option selected="selected">Hannelore Corning</option>
<option selected="selected">Delorse Whitcher</option>
<option selected="selected">Katharyn Marrinan</option>
<option selected="selected">Jeannine Tope</option>
<option selected="selected">Jamila Braggs</option>
<option selected="selected">Eden Cunniff</option>
<option selected="selected">Suzy Schoen</option>
<option selected="selected">Elza Mccook</option>
<option selected="selected">Liana Goris</option>
<option selected="selected">Pauletta Schlabach</option>
<option selected="selected">Synthia Dupuis</option>
<option selected="selected">Scarlett Kestler</option>
<option selected="selected">Magdalen Mele</option>
<option selected="selected">Susanna Schenk</option>
<option selected="selected">Else Stupka</option>
<option selected="selected">Pennie Khang</option>
</select>
</div>

<div class="form-group">
<label>Example of disabled select</label>
<select disabled data-placeholder="Cannot choose" data-allow-clear="1">
Expand Down Expand Up @@ -149,7 +207,7 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha256-7dA7lq5P94hkBsWdff7qobYkp9ope/L5LQy2t/ljPLo=" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" integrity="sha256-AFAYEOkzB6iIKnTYZOdUf9FFje6lOTYdwRJKwTN5mks=" crossorigin="anonymous"></script>
<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>

<!-- select2-bootstrap4-theme -->
<script src="script.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion docs/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
$(function () {
$('select').each(function () {
$('select:not(.custom-select)').each(function () {
$(this).select2({
theme: 'bootstrap4',
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
Expand Down

0 comments on commit b06f529

Please sign in to comment.