CODEWITHSUNDEEP
javascriptjqueryjquery-uidrop-down-menu
Boris Todorov
Boris Todorov

Reputation: 430

JQueryUI adding an image in option

Firstly, I've tried to find a select menu plugin for jquery that to be able to render images in the options. I found such one but it is not updated long time ago and I am afraid it is not supported any more. So I am trying to develop my one.

So I am trying to create a JQuery UI Select menu and I want to add an image in the option.

And After that, I build my select and for each option I add image src data as additional attribute. After the loading of jquery UI select menu I want to setup the images.

I render on the server

<select id="CarId2" name="CarId2">
    <option value="volvo" data-imagesrc="~/Plugins/Cars/Content/Images/volvo.png">Volvo</option>
    <option value="bmw" data-imagesrc="~/Plugins/Cars/Content/Images/bmw.png">BMV</option>
</select>

On Load I am trying to read the options of jqueryui select menu and to update the content of the item but ... I cannot even load the option item.

$(document).ready(function () {
  $("#CarId2").selectmenu();
  var options = $("#CarId2").selectmenu("option");

  for (item in options)
  {
    console.log(item);
  }
});

Can someone help me how to load the option of ui select menu and update its content?

Upvotes: 5

Views: 6030

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

Taking a look to selectmenu custom render you make do something like:

$(function () {
  $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function( ul, item ) {
      var li = $( "<li>" ),
          wrapper = $( "<div>", { text: item.label } );

      if ( item.disabled ) {
        li.addClass( "ui-state-disabled" );
      }

      $( "<span>", {
        style: item.element.attr( "data-style" ),
        "class": "ui-icon " + item.element.attr( "data-class" )
      }).appendTo( wrapper );

      return li.append( wrapper ).appendTo( ul );
    }
  });

  $("#CarId2")
  .iconselectmenu()
  .iconselectmenu( "menuWidget")
  .addClass( "ui-menu-icons avatar" );
});
/* select with CSS avatar icons */
option.avatar {
  background-repeat: no-repeat !important;
  padding-left: 20px;
}
.avatar .ui-icon {
  background-position: left top;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<select name="CarId2" id="CarId2">
    <option value="volvo" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>
    <option value="bmw" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option>
    <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option>
</select>

Upvotes: 5

Dekel
Dekel

Reputation: 62556

You can use the _renderItem method of the selectmenu widget.
The function is responsible for the rendering of the elements in your select menu, and gives you the ability to create the items the way you want.

.selectmenu({
    ...
    _renderItem: function( ul, item ) {
        // Create the list item
        var li = $('<li>')
        // Create the image
        var img = $('<img>')
            .attr('src', $(item.element).data('imagesrc'))

        // append the img to the list item
        img.appendTo(li)

        // append the list item to the menu and return the item
        return li.appendTo( ul );
    }
    ...
})

Upvotes: 3

Related Questions