（另请参阅我的 FIDDLE 查看此操作的示例，）

以下内容基于'pdlove'的初步构思，用于介绍这个优秀的UI Multiselect for jQuery中的图像。

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

通过设置选择器选项行html来实现在复选框文本区域中添加对行项目的图像支持他的：

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>

我还要在样式表css文件中添加一个类控件来设置要呈现的图像大小下拉列表的选项行项目，以及图像，标签和跨度文本的几个位置设置。
在这个例子中，我使用类名'multSelktrImg'，因此在css文件中它看起来像这样：

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;}

---

现在为更改src / jquery.multiselect.js文件

搜索以获取第130行周围的以下匹配代码（具体取决于具体内容）您正在使用的脚本的版本ID）：

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 以上以下一行title = this.innerHTML，：

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

image = this.getAttribute("image");

所以它看起来像这样：

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

---

现在搜索以获取围绕第180行的以下匹配代码：

---

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>';

保存脚本src / jquery.multiselect.js文件的新版本，现在图像将会出现在多选下拉菜单中。使用'multSelktrImg'类值来控制显示的图像大小，方法是更改​​css文件中类的像素大小。

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.

在FIDDLE版本中，我有更改了jQuery脚本的最小化版本，并创建了Select对象的初始化。

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