jqueryUI SelectMenu colors

by jhend2099

HTML

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<select id="selectId">
    <option data-color="blue">Blue</option>
    <option data-color="green">Green</option>
    <option data-color="red">Red</option>
</select>

CSS

.ui-selectmenu-button {
    width: auto !important;
}

.ui-state-default .ui-icon.custom-button {
    // controls dropdown arrow
}

JavaScript

$.widget( "custom.coloriconselectmenu", $.ui.selectmenu, {  
  _renderItem: function( ul, item ) {  
    var li = $("<li>", {text: item.label});  
    var bgColorStyle = 'background-color:' + item.element.attr("data-color");  
    var fullStyle = "float: left; width: 21px; height: 19px; margin-right: 7px;" + bgColorStyle;  
    $("<div>", {style: fullStyle}).appendTo(li);  
    return li.appendTo(ul);  
  },  
  _renderMenu: function( ul, items ) {  
    var that = this;  
    $.each( items, function( index, item ) {  
      that._renderItemData( ul, item );  
    });  
    $( ul ).find( "li:odd" ).addClass( "odd" );  
  }

});


$( "#selectId" ).coloriconselectmenu({ 
    icons: { button: "custom-button" }, 
    change: function(event, ui){ 
        var selectedColor = $(this).find("option:selected").attr("data-color");
        //alert(selectedColor);
        var hiddenSelectMenuBtn = "#" + $(this).attr("id")+"-button .ui-selectmenu-text"
        //alert($(hiddenSelectMenuBtn).text());
        
        var fullStyle = "float: left; width: 21px; height: 19px; margin-right: 7px; background-color:" + selectedColor;  
        $("<span>", {style: fullStyle}).prependTo($(hiddenSelectMenuBtn));  
        //$(hiddenSelectMenuBtn).css({
        //    "float": "left",
        //    "width": "21px",
        //    "height": "19px",
        //    "margin-right": "7px;",
        //    "background-color": "green"});
    } 
});