JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<select id="select" class="form-control">
    <option value="de" data-class="deu" id="de" selected>1</option>
    <option value="en" data-class="eng" id="en">2</option>
</select>

JavaScript

$.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function (ul, item) {
        var li = $("<li>", {
            text: item.label
        });

        if (item.disabled) {
            li.addClass("ui-state-disabled");
        }

        $("<span>", {
            style: item.element.attr("data-style"),
                "class": "ui-icon " + item.element.attr("data-class")
        })
            .appendTo(li);

        return li.appendTo(ul);
    }

});

$("#select")
    .iconselectmenu({
    change: function (event, ui) {
        console.log('here')
    }
})
    .iconselectmenu("menuWidget")
    .addClass("ui-menu-icons customicons");