JSFiddle - React, Tailwind, and code Playground

by klarstil

HTML

<select name="test" data-auto-submit="false">
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
    <option value="4">Test 4</option>
</select>

JavaScript

/**
 * Fancy selectbox - Version 1.0
 *
 * Wraps all incoming select boxes into a DOM structure
 * which is necessary for the styling.
 *
 * @example Sample Usage
 *    $('select').fancyCheckbox();
 *
 * @example Sample usage with a custom configuration
 *    $('input[type="checkbox"]').fancyCheckbox({
 *       baseCls: 'my-fancy-select',
 *       submit: true
 *    });
 *
 * @author shopware AG (c) 2013
 */
;(function ( $, window, document, undefined ) {
    "use strict";

    var pluginName = 'fancySelect',
        defaults = {
            /** @string - Base CSS class for the select box replacement */
            baseCls: 'fancy-select',

            /** @boolean Truthy to submit the form after value change */
            submit: true
        };


    /**
     * Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens.
     * Each token must be unique, and must increment in the format {0}, {1}, etc.
     *
     * @example Sample usage
     *    formatString('<div class="{0}">Text</div>', 'test');
     *
     * @param {String} str - The tokenized string to be formatted.
     * @returns {String} The formatted string
     */
    var formatString = function(str) {
        for (var i = 1; i < arguments.length; i++) {
            str = str.replace('{' + (i - 1) + '}', arguments[i]);
        }
        return str;
    };

    /**
     * Plugin constructor which sets the basic class
     * variables.
     *
     * @param {Node} element - DOM node
     * @param {Object} options (optional) - user configuration
     * @constructor
     */
    function Plugin( element, options ) {
        this.element = element;
        this.$el = $(element);
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();

    }

    /**
     * Initializes the plugin and wraps the select
     * in a wrapping element.
     *
     * @returns {void}
     */
   ...