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

【问题标题】：Customizing jQuery selectmenu dropdown button on after item selected?选择项目后自定义jQuery selectmenu下拉按钮？
【发布时间】：2015-06-14 05:13:45
【问题描述】：

我希望为颜色创建一个下拉菜单，其中每种颜色在项目旁边都有一个小方块。

有：

想要（大致）：

This version (jsfiddle) 可以很好地用于下拉项目本身，但我希望该按钮也更新为旁边有彩色方块。

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

有没有一种好方法可以修改值更新时的下拉按钮，以在下拉菜单中包含颜色方块？

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-ui-selectmenu

【解决方案1】：

如下修改您的代码，使其响应change 事件：

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

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

您可以在updated jsfiddle 中看到这一点。

【讨论】：