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 24 November 2024 at 16:19

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 answers

**Miguel Jiménez** · Answer 1 · 2014-12-07 22:46:04

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 · 2015-03-23 18:32:01

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 · 2015-01-25 10:36:12

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>

TechQA.

Transfer data attributes from option tags to UI selectmenu items

There are 3 answers

Related Questions in JQUERY

Related Questions in SELECT-MENU

Related Questions in JQUERY-UI-SELECTMENU

Popular Questions

Popular Tags

Trending Questions