jQuery UI：如何为Selectmenu选项设置类名？

这是jQuery UI Selectmenu的一个常见小坑——它默认不会把原生<option>的自定义类名同步到生成的模拟菜单元素上。不过解决起来很简单，我们只需要在初始化的时候手动把类名转移过去就行，下面给你两种实用的方案：

方案一：初始化时通过create回调同步类名 #

在调用selectmenu()方法时，利用create事件回调，遍历原生<option>，把对应的类名添加到生成的<li>（或其内部的ui-menu-item-wrapper）上：

$('#mylist').selectmenu({
  create: function(event, ui) {
    // 遍历原生的所有option元素
    $(this).find('option').each(function(index) {
      const optionClass = $(this).attr('class');
      // 如果当前option有自定义类，就同步到对应的菜单项
      if (optionClass) {
        // 找到生成的菜单容器（ID是原select ID加"-menu"）
        // 把类添加到对应的ui-menu-item上
        $('#mylist-menu').find('.ui-menu-item').eq(index).addClass(optionClass);
        // 如果你想把类加到内部的文本容器上，换成下面这行：
        // $('#mylist-menu').find('.ui-menu-item-wrapper').eq(index).addClass(optionClass);
      }
    });
  }
});

方案二：封装同步逻辑，支持动态更新场景 #

如果你的下拉选项会动态新增/修改，那在调用selectmenu('refresh')后，需要重新同步类名。可以把同步逻辑封装成函数，方便重复调用：

// 封装同步类名的函数
function syncOptionClasses() {
  const $select = $('#mylist');
  $select.find('option').each(function(index) {
    const optionClass = $(this).attr('class');
    if (optionClass) {
      // 找到生成的菜单容器（也可以用.next('.ui-selectmenu-menu')来定位）
      $select.next('.ui-selectmenu-menu').find('.ui-menu-item').eq(index).addClass(optionClass);
    }
  });
}

// 初始化Selectmenu时调用同步函数
$('#mylist').selectmenu({
  create: syncOptionClasses
});

// 当动态修改option后，先刷新再同步
$('#mylist').append('<option value="3" class="my_element">Three</option>');
$('#mylist').selectmenu('refresh');
syncOptionClasses();

原理说明 #

jQuery UI Selectmenu的工作方式是隐藏原生<select>，生成一套新的<ul>/<li>结构来模拟下拉菜单，这套新结构默认只会同步option的文本、值等核心属性，不会自动处理自定义类名，所以我们需要手动把原生option的类名映射到对应的生成元素上。

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