15210

Transfer data attributes from option tags to UI selectmenu items

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>

Answer1:

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

Answer2:

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 <strong>demo</strong>: http://jsfiddle.net/gds9xkkm/

Answer3:

Hope below code may help you :) test Link :http://jsfiddle.net/jzw4139p/embedded/result/

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

<!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>


Recommend

  • Extract specific line from text script
  • Using an external java library in OSGI bundle
  • append attributes to input element using jquery
  • Make matched letters highlighted in autocomplete in javascript/jquery
  • JQuery UI Autocompletion - Adding a action link to each result item
  • React Native / React navigation, same level component
  • Extracting links from HTML
  • how set individual styles (css) for option in selectmenu (jquery-ui: selectmenu)
  • What is the max capacity of an ArrayList?
  • ArrayList capacity size increasing strange behaviour
  • python regex split string while keeping delimiter with value
  • yii2 sorting in related model
  • Recommended way to remove events on destroy with jQuery UI Widget Factory
  • Display forms choice in template-Django
  • Android - HorizontalScrollView will not scroll all the way
  • How to change placeholder text in an autocomplete activity of android google place?
  • Two Tables Serving as one Model in Rails
  • JqueryMobile Popup menu is not working
  • Android - Material Design - NavigationView - How to put vertical scroll?
  • Change JButton Shape while respecting Look And Feel
  • Javascript simulate pressing enter in input box
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Importing jscolor library in angular 2
  • jQuery tmpl and DataLink beta
  • Jquery - Jquery Wysiwyg return html as a string
  • Cannot Parse HTML Data Using Android / JSOUP
  • A cron job substitute?
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Net Present Value in Excel for Grouped Recurring CF
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?