JSFiddle - React, Tailwind, and code Playground

by Superman

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css">
<select name="select1" id="select1" class="selectmenu"> 
    <option value='1'>option 1</option>
    <option value='2'>option 2</option>
    <option value='3'>option 3</option>
    <option value='4'>option 4</option>
    <option value='5'>option 5</option>
</select>  
<select name="select2" id="select22" class="selectmenu"> 
    <option value="pre">test</option> 
    <option value="pre2" selected="selected">test 2</option> 
    <option value="pre3">test 3</option> 
    <optgroup label='optgroup 1'>
        <option value='1'>1 - option 1</option>
        <option value='2'>1 - option 2</option>
    </oprgroup>
        <optgroup label='optgroup 2'>
            <option value='1'>2 - option 1</option>
            <option value='2'>2 - option 2</option>
        </oprgroup>
            <option value="post1">test post 1</option> 
        </select>   
            <select id="select3" name="select3" class="selectmenu"> 
                <option value="pre">test</option> 
                <option value="pre2" selected="selected">test 2</option> 
                <option value="pre3">test 3</option> 
                <optgroup label="optgroup 1">
                    <option value="1">1 - option 1</option>
                    <option value="2">1 - option 2</option>
                </optgroup><optgroup label="optgroup 2">
                <option value="3">2 - option 1</option>
                <option value="4">2 - option 2</option>
                </optgroup> 
                <option value="post1">test post 1</option> 
            </select>

CSS

.selected {
    background-color:#9FF;
}

.selectMenu-list {
    border:#000 1px solid;
    list-style:none;
    list-style-position:outside;
    padding:0px;
    margin:0px;
    background-color:#FFF;
}
.selectMenu-list ul {
    list-style:none;
    list-style-position:outside;
    padding:0px;
    margin:0px;
}
.selectMenu-list .heading{
    background-color:#cccccc;
}
.selectMenu-list li:not(.group)  {
    padding:2px;
    border-bottom:#e1e1e1 1px solid;
    margin:1px;
    cursor:pointer;
}
.selectMenu-list li.group li {
    padding-left:10px;    
}
.selectMenu-list li:not(.group):hover  {
    background-color:#FFC;
}

JavaScript

//styled select box by SugaSlide
function option() {
    var selected = "";
    if ($(this).attr("selected")) {
        selected = 'class="selected"';
    }
    return '<li data-value="' + $(this).val() + '" ' + selected + '>' + $(this).text() + '</li>';
}
var btn = $('<button>ha!</button>').button({
    icons: {
        secondary: "ui-icon-circle-triangle-s"
    }
});

$(".selectmenu").each(function() {
    var $orig = $(this),
        str = $(this).children().map(function() {
            var $this = $(this);
            if ($this.is('optgroup')) {
                var o = '<li class="group"><div class="heading">' + $this.attr("label") + '</div><ul>';
                o += $this.children().map(option).get().join("\n");
                o += '</ul></li>';
                return o;
            } else {
                return option.apply($this);
            }
        }).get().join("");


    var $btn = btn.clone().attr({
        'id': $(this).attr("id") + '-btn'
    }).insertAfter(this);

    var $list = $('<ul/>', {
        'id': $(this).attr("id") + '-list',
        'class': "selectMenu-list"
    }).append(str).data({
        "orig": $orig,
        "btn": $btn
    }).insertAfter($btn);

    $btn.find(".ui-button-text").text($("li.selected", $list).html())


    $("li:not(.group)", $list).click(function() {
        var $this = $(this);
        $(".selected", $list).removeClass("selected");
        $this.addClass("selected");
        $orig.val($this.attr("data-value"));
        $btn.find(".ui-button-text").text($this.html());
    });
});