Question

我需要将所有数据属性从选项标签传输到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>

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

Answer 2

这是一个解决方案：

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

一个有用的演示：http://jsfiddle.net/gds9xkkm/

Answer 3

希望下面的代码可以帮助你:)
测试链接：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>

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

3 个答案: