在选择项目后自定义jQuery selectmenu下拉按钮吗?

问题描述

我正在为每种颜色创建一个下拉菜单，每种颜色旁边都有一个小方块.

I'm looking to create a dropdown for colors that has each color as a small square next to the item.

拥有:

想要(大致):

此版本(jsfiddle)适用于下拉菜单项本身，但我希望该按钮也可以更新以使其旁边有彩色正方形.

This version (jsfiddle) works fine for the dropdown items themselves, but I'd like the button to also update to have the colored square next to it.

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

是否有一种很好的方法来修改值更新中的下拉按钮，使其在下拉菜单中包含颜色方块?

Is there a good way to modify the dropdown button on value update to include the color square like in the dropdown?

推荐答案

按如下所示修改您的代码，使其响应change事件:

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.

您可以在更新的jsfiddle 中看到它的作用.

You can see this in action in the updated jsfiddle.

这篇关于在选择项目后自定义jQuery selectmenu下拉按钮吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！