Update demo

- Update to Select2 4.1.rc0
- Add pre-selected examples
- Add default select fields

Author: tagliala

docs/index.html

@@ -8,7 +8,7 @@
   <!-- 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">
   <!-- 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 -->
@@ -22,6 +22,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">
@@ -34,6 +46,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">
@@ -60,6 +82,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">
@@ -149,7 +206,7 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
 <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>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/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>

docs/script.js

@@ -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',