jQuery UI Multiselect Widget With Images (Eric Hynds Version)

The excellent dropdown jQuery UI Multiselect widget that supports styling via jQuery UI Themeroller still doesn't have support for including images within the drop down rows.

I didn't see any answers to this problem within Stackoverflow yet it seems to be asked regularly in various areas of the internet, so I am giving the answer to this question below..

(ALSO See my FIDDLE Example to see this in action,)

The following is based on an initial idea by 'pdlove' for introducing the use of images within this excellent UI Multiselect for jQuery.

Adding Image support for line items in check box text area is achieved by setting out the selector option rows html like this:

<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
    normal visible text
</option>

I would also add a class control to your style sheet css file to set the image size being rendered in the option line items of the drop down, along with a couple of position settings for the image, label and span text. In this example I use the class name 'multSelktrImg', so within the css file it would look something like this:

.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
    display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}

---

Now for the change in the src/jquery.multiselect.js file

Search for the following matching code around line 130 (depending on what version id of the script you are using):

// build items
    el.find('option').each(function( i ){
        var $this = $(this),
            parent = this.parentNode,
            title = this.innerHTML,
            description = this.title,
            ....

ADD the following line above "title = this.innerHTML,":

image = this.getAttribute("image");

so that it looks like this:

---

// build items
    el.find('option').each(function( i ){
        var $this = $(this),
        parent = this.parentNode,
        image = this.getAttribute("image");
        title = this.innerHTML,
        description = this.title,

---

Now Search for the following matching code around line 180:

// add the title and close everything off
    html += ' /><span>' + title + '</span></label></li>';
    ....

Replace the code line with the following to allow for rendering of your images:

// add the title and close everything off
    html += ' /><span>';
            if (image != null) {
                html += '<img src="'+image+'" class="multSelktrImg">';
            }
            html += title + '</span></label></li>';

save the new version of the script src/jquery.multiselect.js file and now the images will appear in the multiselect drop down. Use the 'multSelktrImg' class value to control the size of the image displayed by altering the pixel size for the class in your css file.

In the FIDDLE version, I have altered the minimized version of the jQuery script, and created an initialisation of the Select object.