Customizing JQuery Selectmenu Dropdown Button On After Item Selected?

I'm looking to create a dropdown for colors that has each color as a small square next to the item. Have: Want (roughly): This version (jsfiddle) works fine for the dropdown item

Solution 1:

Modify your code as follows so that it responds to the change event:

$( "#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));  
}); 

You need to select the "select menu text", which isn't readily exposed via a function or property.

You can see this in action in the updated jsfiddle.