如何为jQuery UI Selectmenu按钮添加选中项自定义图标

我之前也踩过这个坑！jQuery UI Selectmenu的按钮组件确实不会自动同步选中项的自定义图标，默认只会显示它自带的标准图标，得手动做一些调整才能搞定。下面是我亲测有效的解决方案：

1. 先确认自定义图标的基础设置 #

假设你已经按照Demo给每个<option>添加了自定义图标的标识（比如data-icon属性），并在渲染菜单项时成功显示了图标：

<select id="customSelect">
  <option value="book" data-icon="icon-book">书籍</option>
  <option value="movie" data-icon="icon-movie">电影</option>
  <option value="music" data-icon="icon-music">音乐</option>
</select>

2. 用JS同步按钮与选中项的图标 #

核心思路是在Selectmenu初始化和选项变更时，手动把选中项的图标类添加到按钮的图标元素上：

$("#customSelect").selectmenu({
  // 初始化时设置默认选中项的图标
  create: function(event, ui) {
    const $button = $(this).next(".ui-selectmenu-button");
    const selectedIcon = $(this).find("option:selected").data("icon");
    // 替换默认图标为自定义图标
    $button.find(".ui-icon").addClass(selectedIcon);
  },
  // 选项变更时更新图标
  change: function(event, ui) {
    const $button = $(this).next(".ui-selectmenu-button");
    const $icon = $button.find(".ui-icon");
    
    // 先移除之前的自定义图标类（避免多个图标类叠加）
    $icon.removeClass(function(index, className) {
      return (className.match(/(^|\s)icon-\S+/g) || []).join(' ');
    });
    
    // 添加当前选中项的图标类
    $icon.addClass(ui.item.element.data("icon"));
  }
});

3. 用CSS覆盖默认图标样式 #

默认的.ui-icon有自带的背景图，需要把它去掉，再定义你的自定义图标样式：

/* 移除按钮上的默认图标背景 */
.ui-selectmenu-button .ui-icon {
  background-image: none !important;
  /* 可选：调整图标容器大小适配你的自定义图标 */
  width: 20px;
  height: 20px;
}

/* 定义每个自定义图标的样式 */
.ui-icon.icon-book {
  background-image: url("path/to/book-icon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.ui-icon.icon-movie {
  background-image: url("path/to/movie-icon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.ui-icon.icon-music {
  background-image: url("path/to/music-icon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

为什么之前的尝试没生效？ #

大概率是因为你没覆盖掉默认.ui-icon的background-image，或者没有在选项变更时动态更新按钮的图标类。默认的Selectmenu按钮不会自动关联选中项的自定义标识，必须通过JS主动同步。

内容的提问来源于stack exchange，提问作者Minesguy82