jQuery toggleClass example

Toggle class name on click in jQuery

by mesak

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@ttskch/[email protected]/dist/select2-bootstrap4.min.css">

<div class="container">
  <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" target="_blank">@ttskch/select2-bootstrap4-theme</a></h3>
  <hr>

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

    <div class="form-group">
...

JavaScript

$.fn.select2.amd.require(['select2/selection/multiple'],function ( MultipleSelection) {
	MultipleSelection.prototype.selectionContainer = function () {
			var $container = $(
				'<li class="select2-selection__choice">' +
					'<span class="select2-selection__choice__remove" tabindex="-1"><span aria-hidden="true">&times;</span></span>' +
					'<span class="select2-selection__choice__display"></span>' +
				'</li>'
			);
		return $container;
	};
});

$(function () {
  $('select').each(function () {
    $(this).select2({
      theme: 'bootstrap4',
      width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
      placeholder: $(this).data('placeholder'),
      allowClear: Boolean($(this).data('allow-clear')),
    });
  });
});