Boris Todorov Boris Todorov - 2 months ago 11x
Javascript Question

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>

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 () {
var options = $("#CarId2").selectmenu("option");

for (item in options)

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


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.

    _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

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