JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="http://ivaynberg.github.io/select2/select2-3.4.5/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-3.4.5/select2.css">
<select id="tags" multiple style="width: 200px;">
    <option>aaa</option>
    <option>bbb</option>
    <option>ccc</option>
    <option>ddd</option>
    <option>eee</option>
</select>

<div id="box"></div>

CSS

#box {margin-top: 50px; font-size: 30px; font-family: arial; background-color: #ff0000; color: #fff; text-align: center; padding: 5px; display: none;}

JavaScript

$(function () {
    $("#tags").select2({
        maximumSelectionLeng:3,
        formatSelectionTooBig: function (limit) {
            
            $('#box').show().text('Callback!');
            
            return 'Too many selected elements (' + limit + ')';
        }
    });
});