Is there anyway to have listbox with images (using dual listbox and image combobox plugin) or another solution?

Question

i am using the jquery dual listbox plugin (which works great)but i want to have images next to the entries on each of the listboxes. I wanted to apply the functionality like you do in this image combobox jquery plugin.

I tried to combine these two but it doesn't seem to work. i keep getting an exception on the .msdropdown() line of the image combo code.

has anyone been able to get the effect of these plugins working together or can suggest another approach to solving this requirement.

the first link is broken, do you have an alternative link eg github? — Mousey, Sep 08 '15 at 23:38
`i keep getting an exception on the .msdropdown() line of the image combo code.` what exception is it? — sertsedat, Sep 09 '15 at 08:26

score 6 · Answer 1 · edited May 23 '17 at 10:26

Here's why you'll have problems with your approach:

<option>s within the HTML <select>s are very restricted in what they will do - html elements inside them are stripped away, and css styles that add images don't work. See this answer:

Is it possible to style a select box?

The jquery.dd.js script programmatically replaces the <select> with a <div> containing <span>s and then handles key presses and events itself - for a single select drop down.

The jquery.duallistbox-1.3.js script relies on the list elements being in a <select>. It doesn't emulate the selection behavior events. It is using the built in browser's behavior (which is different on different platforms) to do the multiple selection.

As they stand they are not compatible. To combine them you would need to emulate multiple selection using <div>/<span> rather than <select>/<option>, including taking into account the platform differences. Certainly possible, but not a quick fix.

score 2 · Answer 2 · answered Sep 11 '15 at 21:55

I completely agree with @James Crook comments.

However, you might want to try this Codepen working example that I created.

About the solution:

Having following select HTML element code:

<select name="webmenu" id="webmenu">
    <option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" data-image="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
    <option value="games" data-image="icons/icon_games.gif">Games</option>
</select>

We need first to apply jquery.duallistbox on that select HTML element as follow:

$("select").DualListBox({
    json: false // use local data
    timeout: 300 // delay for filter functionality
});

As result, this plugin creates two different select HTML elements. And we need to apply the jquery.msDropDown plugin on each of them as follow:

$("select.unselected").msDropDown();
$("select.selected").msDropDown();

With this, UI is ready.

However, we need to keep functionality for both plugins. We need to update/re-render the dropdowns with icons every time there is a change made by user either by:

clicking on jquery.duallistbox buttons:

$('div.center-block button').on('click', updateDropdowns);

or by tying inside jquery.duallistbox filter input field:

$('input.filter').on('keyup', function(){
    // Following timeout value (300) should not be lower than
    // timeout option from DualListBox
    setTimeout(updateDropdowns, 300);
});

Note that these listeners refer to a updateDropdowns method. And here is where we play with the DOM to re-render the dropdowns by applying again jquery.msDropDown plugin on each select HTML elements. This method looks like:

var updateDropdowns = function(){
    // Update/re-render first dropdown
    $('select.selected').detach().appendTo('.col-md-5:last');
    $('.col-md-5:last').find('div').remove();
    delete $('select.selected').data().dd;
    $('select.selected').msDropdown();

    // Update/re-render second dropdown
    $('select.unselected').detach().appendTo('.col-md-5:first');
    $('.col-md-5:first').find('div').remove();
    delete $('select.unselected').data().dd;
    $('select.unselected').msDropdown();
};

I want to highlight that this process could be expensive in regards to performance when dealing with lot of options in the select HTML elements. Definitely it is a work-around and the best choice could be to have a .redraw() method that should be implemented for jquery.msDropDown plugin.

Hope this solution helps to solve your problem.

score 0 · Answer 3 · answered Mar 29 '11 at 23:03

To avoid having to recreate the multi-select that is on the page, you'll need to use the jQuery UI position() plugin to position the icons relative to the option's position on the page.

Loop over the options:

jQuery('select[multiple]').children('option').each(function() {
   var imgSrc = this.value + '.png';
   jQuery('<img src=" + imgSrc + '">').appendTo('body').position({
        // position properties
   });

});

Take a look at http://jqueryui.com/demos/position/.

You'll have to update the position of the icons every time the lists are updated.

Is there anyway to have listbox with images (using dual listbox and image combobox plugin) or another solution?

3 Answers3