将数据属性从选项标签传输到 UI 选择菜单项答案

【问题标题】：Transfer data attributes from option tags to UI selectmenu items将数据属性从选项标签传输到 UI 选择菜单项
【发布时间】：2015-02-05 13:13:28
【问题描述】：

我需要将所有数据属性从选项标签转移到 UI 选择菜单项（li 标签）。如何用 API 做到这一点？

<select class="select" id="" name="PROPERTY[126]">
  <option value="315" data-filter="flat">Квартира</option>
  <option value="316" data-show="standart" data-filter="room">Комната</option>
  <option value="317" data-filter="house" data-hide="standart flat room uchastok" data-show="house zarub elite">Коттедж</option>
  <option value="318" data-filter="uchastok" data-show="zarub uchastok elite" data-hide="standart flat room house">Участок</option>
  <option value="319" data-filter="zarub" data-show="elite" data-hide="standart">Зарубежная недвижимость</option>
</select>

<script>$("select").selectmenu()</script>

【问题讨论】：

标签： jquery select-menu jquery-ui-selectmenu

【解决方案1】：

将此添加到您的代码中，数据属性将被复制：

$.widget( "ui.selectmenu", $.ui.selectmenu, {
   _renderItem: function( ul, item ) {
        elementdata = item.element.context.dataset;
        attributesObj = {};
        Object.keys(elementdata).forEach(function(x){
            attributesObj["data-"+x] = elementdata[x]; 
        });
        return $( '<li>' )
         .attr(attributesObj)
            .append(item.label)
            .appendTo( ul );
   } 
});

【讨论】：

【解决方案2】：

希望下面的代码可以帮助你:)
测试链接：http://jsfiddle.net/jzw4139p/embedded/result/

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>selectmenu demo</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>  
  </head>
  <body>

    <select class="select" id="speed" name="PROPERTY[126]">
      <option value="315" data-filter="flat">Квартира</option>
      <option value="316" data-filter="room" data-show="standart">Комната</option>
      <option value="317" data-filter="house" data-hide="standart flat room uchastok" data-show="house zarub elite">Коттедж</option>
      <option value="318" data-filter="uchastok" data-show="zarub uchastok elite" data-hide="standart flat room house">Участок</option>
      <option value="319" data-filter="zarub" data-show="elite" data-hide="standart">Зарубежная недвижимость</option>
    </select>
    <script>
      $.widget( "ui.selectmenu", $.ui.selectmenu, {
           _renderItem: function( ul, item ) {
              return $( '<li>' )
                 .attr({
                    'data-value': item.value ,
                    'data-filter':$(item.element).data('filter'),
                    'data-show': $(item.element).data('show'),
                    'data-hide': $(item.element).data('hide')

                  })
                 .append(item.label)
                 .appendTo( ul );
           } 
        });
      $("#speed").selectmenu({
        change: function( event, ui ) {
          alert("data-filter is : "+$(ui.item.element).data('filter')+" value is  : "+ui.item.value);
        }
      });
    </script>
  </body>
</html>

【讨论】：

【解决方案3】：

这里有一个解决方案：

var select = $("#selectid");
var $ul = $("<ul></ul>").appendTo("body");

select.find("option").each(function(i){
    var $li = $("<li></li>").appendTo($ul);
    $li.text($(this).text());
    $li.data($(this).data());
});

还有一个有效的demo：http://jsfiddle.net/gds9xkkm/

【讨论】：

谢谢，但这是自定义方法。我需要使用 JQuery UI Selectmenu API (_renderMenu) 来做到这一点。你知道怎么做吗？
请提供有关该插件的更多信息，以便我了解您想要完成的工作以及我可以提供哪些帮助
我尝试这样做 $( "select" ).selectmenu({ icons: { button: "ui-icon-triangle-1-s" }, _renderItem: function( ul, item ) { var li = $( "
" ) .data( "show", item.value ); this._setText( li, item.label ); return li.appendTo( ul ); } });