我希望为颜色创建一个下拉菜单,其中每种颜色都作为元素旁边的一个小方 block 。
有:
想要(大致):
This version (jsfiddle)下拉元素本身工作正常,但我希望按钮也更新为旁边有彩色方 block 。
$.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"}});
是否有一种好方法可以修改值更新时的下拉按钮,使其像下拉菜单一样包含颜色方 block ?
最佳答案
按如下方式修改您的代码,使其响应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 中看到实际效果.
关于javascript - 选择元素后自定义 jQuery selectmenu 下拉按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29528317/