Transfer data attributes from option tags to UI selectmenu items

Question

Transfer data attributes from option tags to UI selectmenu items

1.7k Views Asked by koalex At 19 October 2024 at 19:42

I need to transfer all data-attributes from option tags to to UI selectmenu items (li tags). How do this with 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>

Original Q&A

There are 3 best solutions below

**Miguel Jiménez** · Answer 1

Here is a solution:

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

And a working demo: http://jsfiddle.net/gds9xkkm/

**Web and Flow** · Answer 2

add this to your code and data attributes will copy:

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

**Gourav Makhija** · Answer 3

Hope below code may help you :)
test Link :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>

Transfer data attributes from option tags to UI selectmenu items

There are 3 best solutions below

Related Questions in JQUERY

Related Questions in SELECT-MENU

Related Questions in JQUERY-UI-SELECTMENU

Trending Questions

Popular # Hahtags

Popular Questions