Is there anyway to have listbox with images (using dual listbox and image combobox plugin) or another solution?
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(开发者_如何学C) 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.
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.
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
filterinput
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.
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.
精彩评论