如何使用jQuery UI选择菜单创建自定义颜色选择器下拉列表？

Question

我一直试图创建一个自定义下拉列表，其中包含颜色名称和颜色芯片（颜色的阴影）。下拉列表将由我将以颜色数组的形式提供的输入选项动态填充。 基本上，我想要实现的是：

所以，我使用了jQuery UI selectmenu插件，它提供了一个选项来放置＆＃39;图标＆＃39;以及下拉列表中的文字：selectmenu icon。我打算用彩色芯片替换图标。 我计划使用_renderItem selectmenu来执行此操作，并且到目前为止已达到此目的： [ 这里的字体颜色是我想要与文本一起显示的颜色芯片的颜色。我确实得到了颜色的rgb值。这是迄今为止的实施：

$.widget("custom.iconselectmenu", $.ui.selectmenu, {
            _renderItem: function (ul, item) {
                console.log(item);
                var li = $("<li>")
                    .css("color", "#"+item.value); //changing color with item.value

                if (item.disabled) {
                    li.addClass("ui-state-disabled");
                }

                this._setText(li, item.label);

                return li.appendTo(ul);
            }
        });



 $("#DropDownID")
            .iconselectmenu()
            .iconselectmenu("menuWidget");

for (var i = 0; i < Color.Data.length; i++) {
                $("#DropDownID").append($("<option></option>").val(Color.Data[i].RgbValue).html(Color.Data[i].ColorName));
            }

您是否可以通过替换当前的javascript代码帮助我在前面提到的下拉菜单中实现彩色芯片和文本格式？

Answer 1

使用renderItem，你在正确的轨道上。基本上，剩下的就是将颜色芯片添加到li元素中。您可以添加图标/图像或添加其他html元素。在我创建的示例中，我只是在li中添加了一个span作为颜色芯片。

$(function() {
  $.widget("custom.selectmenu", $.ui.selectmenu, {
    _renderItem: function(ul, item) {

      console.log(item);
      var li = $("<li>"),
        wrapper = $("<div>");

      if (item.disabled) {
        li.addClass("ui-state-disabled");
      }

      $("<span>", {
          style: "background-color: #" + item.value,
          "class": "ui-color-chip"
        })
        .appendTo(wrapper);
      wrapper.append(item.label);

      return li.append(wrapper).appendTo(ul);
    }
  });

  $("#DropDownID")
    .selectmenu()
    .selectmenu("menuWidget")
    .addClass("ui-menu-icons customicons");

  var Color = {
    Data: [

      {
        RgbValue: 'ff0000',
        ColorName: 'Red'
      }, {
        RgbValue: '008000',
        ColorName: 'Green'
      },
    ]
  };

  for (var i = 0; i < Color.Data.length; i++) {
    $("#DropDownID").append($("<option></option>").val(Color.Data[i].RgbValue).html(Color.Data[i].ColorName)		);
  }
});

.ui-color-chip {
  height: 12px;
  width: 20px;
  top: 0px;
  bottom: 0px;
  left: 1em;
  margin: 0px 10px 0px 0px;
  display: inline-block;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<select name="DropDownID" id="DropDownID"></select>