MicroUnoDrop jQuery Plugin (select drop-down)

A powerful, yet simple, drop-down selection for Bootstrap 4. Lightweight code.

by paultechguy

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- use normal Bootstrap markup -->
<div id="demo" class="btn-group">
  <button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  <div class="dropdown-menu">
    <div class="btn-sm" style="white-space: nowrap">Favorite Color</div>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item btn-sm" data-value="10" type="button">Sunset Red</button>
    <button class="dropdown-item btn-sm" data-value="20" type="button">Sky Blue</button>
    <button class="dropdown-item btn-sm" data-value="30" type="button">Midnight Black</button>
    <button class="dropdown-item btn-sm" data-value="40" type="button">Royal Purple</button>
  </div>
</div>

JavaScript

//////////////////////////////
// MicroUnoDrop plugin - start
//
jQuery.fn.MicroUnoDrop = function(options) {
   let root = this;
   let toggle = root.find('.dropdown-toggle');
   let drop = root.find('.dropdown-menu');

   options = options || {};

   // set default text for dropdown
   let index = parseInt(options.default);
   index = isNaN(index) ? 0 : index;
   let defaultItem = drop.children('.dropdown-item').eq(index);
   let text = defaultItem.text();
   let prevText = text;

   // initial UI updates
   toggle.text(text);
   if (options.selected) {
      defaultItem.addClass(options.selected);
   }

   // what elements do we trigger on
   let eltrigger = options.items ? options.items : 'a'
   let items = drop.find(eltrigger);
   items.on('click', function(e) {
      let selected = $(e.target).text();
      toggle.text(selected);

      // args to trigger
      let args = [e.target];

      // do we pass some data attribute to trigger
      if (options.data) {
         let data = $(e.target).data(options.data);
         args.push(data);
      }

      // trigger depending if selection changes, and if user wants to know
      if (!options.nodups || prevText !== selected) {
         root.trigger('select.dropdown', args);
      }

      if (options.selected) {
         items.removeClass(options.selected);
         $(e.target).addClass(options.selected);
      }
      prevText = selected;
   });
};
//
// MicroUnoDrop plugin - end
//////////////////////////////

// this is what you write to use the plugin
$(document).ready(function() {

   let options = {
      // default selection index (default is '0')
      default: 1,

      // what html tags are the choices (default is 'a')
      items: 'button',

      // should events fire for same choice selected (default is false)
      nodups: true,

      // what data-xxxx tag to provide selected event (default is null)
      data: 'value',

      // what css class to applyl to selected item
      selected:...