从原始 <option> 向 jQuery UI 选择菜单 <li> 添加类答案

【问题标题】：Add class to jQuery UI selectmenu <li> from original <option>从原始 <option> 向 jQuery UI 选择菜单 <li> 添加类
【发布时间】：2017-03-01 14:40:46
【问题描述】：

我希望将添加到初始

jQuery UI 之前的选择菜单标记是：

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option class="child-option">Sub Option 1</option>
    <option class="child-option">Sub Option 2</option>
    <option>Option 3</option>
    ...
</select>

编辑：此时 jQuery UI 输出的内容：

<div class="ui-selectmenu-menu">
    <ul>
        <li class="ui-menu-item"><div>Option 1</div></li>
        <li class="ui-menu-item"><div>Option 2</div></li>
        <li class="ui-menu-item"><div>Sub Option 1</div></li>
        <li class="ui-menu-item"><div>Sub Option 2</div></li>
        <li class="ui-menu-item"><div>Option 3</div></li>
    </ul>
</div>

我希望 jQuery UI 输出什么：

<div class="ui-selectmenu-menu">
    <ul>
        <li class="ui-menu-item"><div>Option 1</div></li>
        <li class="ui-menu-item"><div>Option 2</div></li>
        <li class="ui-menu-item child-option"><div>Sub Option 1</div></li>
        <li class="ui-menu-item child-option"><div>Sub Option 2</div></li>
        <li class="ui-menu-item"><div>Option 3</div></li>
    </ul>
</div>

我在类似的请求线程here 和here 中尝试了解决方案，但没有成功。

编辑 2：

我用来生成ul 的jQuery 是：

$( "select" ).selectmenu({
    transferClasses: true,
});

任何帮助都会很棒！

谢谢

【问题讨论】：

该类是被复制到所有li 还是仅与选项具有相同索引的那些？
理想情况下是与选择选项相同的列表项。所以在这个例子中，只有第三个和第四个列表项会得到这个类。
目前还不清楚您是如何从select 转到ul。这是 jQuery UI 自动执行的操作还是您手动重新创建它？
我正在使用 jQuery UI 的 selectmenu 小部件从这里 api.jqueryui.com/selectmenu 获取手动选择菜单中的 ul
我在文档api.jqueryui.com/selectmenu 上没有看到transferClasses 选项

标签： jquery jquery-ui

【解决方案1】：

我可以通过使用 open 事件遍历新创建的选择菜单来做到这一点。显然，实际项目直到第一次调用 open 方法时才存在。

$('select').selectmenu({
  open: function() {
      $('div.ui-selectmenu-menu li.ui-menu-item').each(function(idx){
      $(this).addClass( $('select option').eq(idx).attr('class') )
      })
  }
})

.child-option {
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option class="child-option">Sub Option 1</option>
  <option class="child-option">Sub Option 2</option>
  <option>Option 3</option>
</select>

【讨论】：

我打算建议一些更复杂的东西，干得好。你也可以使用api.jqueryui.com/selectmenu/#method-_renderItem。
这很有魅力，谢谢@j08691！感谢您的输入@american-slime

【解决方案2】：

您似乎无法指示 selectmenu 保留类或其他属性。

但您可以通过小部件工厂创建自己的选择菜单扩展。

//classyMenu widget extends/overrides selectmenu
$.widget("custom.classyMenu", $.ui.selectmenu, { 
  _renderItem: function(ul, item) {
    var li = $("<li>" ,{
      class: item.element.attr("class") //access the original item's class
    }),
    wrapper = $("<div>", {
      text: item.label
    });
    if ( item.disabled ) {
      li.addClass("ui-state-disabled");
    }
    return li.append( wrapper ).appendTo(ul);
  }
});


$("select").classyMenu(); //use classyMenu instad of selectmenu()

$("#open").click(function(){
  $("select").classyMenu("open");
});

$("#close").click(function(){
  $("select").classyMenu("close");
});

.bronze{color: #D1A684;}
.silver{color: silver;}
.gold{color: gold;}

ui-selectmenu-button{font-weight: bold}

<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script
  src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<button id="open">Open</button>
<button id="close">Close</button>

<br />

<select>
  <option value=""></option>
  <option value="1" class="bronze">1</option>
  <option value="2" class="silver">2</option>
  <option value="3" class="gold">3</option>
</select>

【讨论】：

【解决方案3】：

有一种简单直接的方法可以将自定义类添加到任何 jQuery UI 小部件 - 它是 classes option。

让我们以selectmenu jQuery 小部件为例。

HTML 部分是严格的：

<select name="speed" id="speed" class="my-happy-decorated-class">
  <option>Slower</option>
  <option>Slow</option>
  <option selected="selected">Medium</option>
  <option>Fast</option>
  <option>Faster</option>
</select>

像往常一样，为了在加载文档后用可爱的 jQuery UI 装饰这个丑陋的默认东西，我们应用了适合小部件 jQuery UI 功能 selectmenu():

<script>
  $(function() {
      $("#speed").selectmenu();
  } );
</script>

结果我们得到这样的结果：

<select name="speed" id="speed" style="display: none;" class="my-happy-decorated-class">
            <option>Slower</option>
            <option>Slow</option>
            <option selected="selected">Medium</option>
            <option>Fast</option>
            <option>Faster</option>
        </select>
<span tabindex="0" id="speed-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="speed-menu" aria-haspopup="true" class="ui-selectmenu-button ui-button ui-widget ui-selectmenu-button-closed ui-corner-all" aria-activedescendant="ui-id-3" aria-labelledby="ui-id-3" aria-disabled="false"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">Medium</span></span>
<span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-selectmenu-text">Medium</span>
<span tabindex="0" id="speed-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="speed-menu" aria-haspopup="true" class="ui-selectmenu-button ui-button ui-widget ui-selectmenu-button-closed ui-corner-all" aria-activedescendant="ui-id-3" aria-labelledby="ui-id-3" aria-disabled="false"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">Medium</span></span>

如您所见，初始标签 <select ... class="my-happy-decorated-class"> 被隐藏了，并且对类 "my-happy-decorated-class" 应用任何样式都是无用的。

这就是 jQuery UI-option classes 来提供帮助的地方！只需使用相同的 selectmenu() 命令将该选项应用于小部件，您就会在结果代码中的某个位置获得该类：

<script>
  $(function() {
      $("#speed").selectmenu();
      $("#speed").selectmenu({
        classes: {
            "ui-selectmenu-button-closed": "my-happy-decorated-class"
        }
      });
  });
</script>

注意，“ui-selectmenu-button-closed”是默认类，jQuery UI 设置为用于显示小部件的 HTML 标记！您可以在浏览器中使用 F12 看到的任何小部件不同部分的默认类的名称。

生成的 HTML 代码将是：

    <select name="speed" id="speed" style="display: none;" class="my-happy-decorated-class">
                <option>Slower</option>
                <option>Slow</option>
                <option selected="selected">Medium</option>
                <option>Fast</option>
                <option>Faster</option>
            </select>
    <span tabindex="0" id="speed-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="speed-menu" aria-haspopup="true" class="ui-selectmenu-button ui-button ui-widget
ui-selectmenu-button-closed my-happy-decorated-class
ui-corner-all" aria-activedescendant="ui-id-3" aria-labelledby="ui-id-3" aria-disabled="false"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">Medium</span></span>
    <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
    <span class="ui-selectmenu-text">Medium</span>
    <span tabindex="0" id="speed-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="speed-menu" aria-haspopup="true" class="ui-selectmenu-button ui-button ui-widget ui-selectmenu-button-closed ui-corner-all" aria-activedescendant="ui-id-3" aria-labelledby="ui-id-3" aria-disabled="false"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">Medium</span></span>

如您所见，您的类 my-happy-decorated-class 已添加到小部件的主视觉结果 span 中，您可以对其应用样式。

【讨论】：

【解决方案4】：

如果你有多个选择：

$("select").each(function(index, select) {
    $(select).selectmenu({
        create: function( event, ui ) {
            $(select).next().addClass($(select).attr('class'));
        },
        open: function( event, ui ) {
            // Maybe remove classes or whatever
        }
    });
});

【讨论】：