从原始<option>

时间：2017-03-01 14:40:47

标签： jquery jquery-ui

我希望复制添加到初始＆lt;的自定义类。选项＆gt;转到jQuery selectmenu UI生成列表。我尝试过使用＆＃39; transferClasses：true＆＃39;但这只是将主要班级转移到了。

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,
});

任何帮助都会很棒！

由于

5 个答案:

答案 0 :(得分：4)

我能够通过使用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>

答案 1 :(得分：2)

似乎没有办法可以指示selectmenu保留类或其他属性。

但您可以通过小工具工厂创建自己的selectmenu扩展程序。

＆＃13;
＆＃13; 
//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");
});
＆＃13; 
.bronze{color: #D1A684;}
.silver{color: silver;}
.gold{color: gold;}

ui-selectmenu-button{font-weight: bold}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

有一种简单直接的方法可以将自定义类添加到任何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-function 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">已隐藏并将任何样式应用于课程＆＃34;我的快乐装饰课程＃34; 无用。

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

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

注意，＆＃34; ui-selectmenu-button-closed＆＃34;是默认类，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中，您可以将样式应用于它。

答案 3 :(得分：0)

如果您有多个选择：

$("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
        }
    });
});

答案 4 :(得分：0)

如果您的页面上只有一个下拉列表，那么 j08691 的答案效果很好。但是如果你有多个下拉菜单，它们都会从第一个下拉菜单中获取类。所以我修改了它在一页上多次使用：

$('select').selectmenu({
  open: function() {
      const $dropdown = $(this);
      $('div.ui-selectmenu-menu li.ui-menu-item').each(function(idx){
      $(this).addClass( $dropdown.find('option').eq(idx).attr('class'))
      })
  }
})
相关问题
最新问题