JSFiddle - React, Tailwind, and code Playground

by kasperfish

HTML

<script src="//cdn.jsdelivr.net/select2/3.4.2/select2-spinner.gif"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.2/select2.css">
<script src="//cdn.jsdelivr.net/select2/3.4.2/select2.min.js"></script>
<script src="//cdn.jsdelivr.net/select2/3.4.2/select2.png"></script>
<div class="widget-content">
    <form action="#" method="get" class="form-horizontal" id="add_ticket_form">
        <div class="form-group">
            <label class="control-label">Product</label>
            <div class="controls">
                <select class='dropdown' style="width:50%" id="dropdown1" name="dropdown1" required="required">
                    <optgroup label="A">
                    <option value="">1</option>
                    <option ivalue="">2</option>
                    <option value="">3</option>
                    <optgroup label="B">
                    <option  value="">4</option>
                    <option  value="">5</option>
                    <option value="">6</option>
                </select> <span class="help-block">This is a description</span>

            </div>
        </div>
    </form>
</div>

JavaScript

function format(item) {
           opt = $('select').find(':selected');
           sel = opt.text();
           og = opt.closest('optgroup').attr('label');
          return item.text+'-'+og;
        
    }
    $("select").select2({
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
    });