Javascript 选择项目后自定义jQuery selectmenu下拉按钮？

我想为每种颜色创建一个下拉列表，将每种颜色作为项目旁边的一个小正方形

拥有：

需要（大致）：

对于下拉项本身来说效果很好，但我希望按钮也能更新，使其旁边有彩色的方块

$.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);  
  }
});  

$("#selectId").coloriconselectmenu({icons: {button: "custom-button"}});

$.widget（“custom.coloriconselectmenu”，$.ui.selectmenu，{
_renderItem:函数（ul，项）{
var li=$（“
”，{text:item.label}）；
var bgColorStyle='background color:'+item.element.attr（“数据颜色”）；
var fullStyle=“float:左；宽度：21px；高度：19px；右边距：7px；”+bgColorStyle；
$（“”，{style:fullStyle}）.appendTo（li）；
返回li.附录（ul）；
}
});  
$（“#selectId”）.coloriconselectmenu（{图标：{按钮：“自定义按钮”}}）；

---

是否有一种好方法可以修改值更新时的下拉按钮，使其在下拉列表中包含颜色方块？

按如下方式修改代码，使其响应

更改事件：

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

$（“#selectId”）.coloriconselectmenu（{
图标：{按钮：“自定义按钮”}，
更改：函数（事件、ui）{
var selectedColor=$（this）.find（“选项：selected”）.attr（“数据颜色”）；
//警报（selectedColor）；
var hiddenSelectMenuBtn=“#”+$（this.attr（“id”）+”-按钮。ui选择菜单文本”
//警报（$（hiddenSelectMenuBtn.text（））；
var fullStyle=“float:左；宽度：21px；高度：19px；右边距：7px；背景色：”+selectedColor；
$（“”，{style:fullStyle}）.prependTo（$（hiddenSelectMenuBtn））；
}); 

您需要选择“选择菜单文本”，它不会通过函数或属性轻易公开

您可以在中看到这一点