JSFiddle - React, Tailwind, and code Playground

by Sivasakthi Chandrasekaran

HTML

<link rel="stylesheet" href="http://static.myrental.us/css/myrentals/jquery.multiselect.css">
<link rel="stylesheet" href="http://static.myrental.us/css/myrentals/jquery-ui.custom.css">
<div id="AdminSettns" >
<select id="divselktr" class="divselktr" name="divselktr" multiple="multiple">
    <option value="1" image="http://static.myrental.us/pp/avatar-male-sm.jpg" class="multSelktrImg">normal text 1</option>
<option value="2" image="http://static.myrental.us/pp/avatar-male-sm.jpg" class="multSelktrImg">normal text 2</option>
<option value="3" image="http://static.myrental.us/pp/avatar-male-sm.jpg" class="multSelktrImg">normal text 3</option>
</select>
</div>

<div id="expln">
Quick code help by <a href="http://myrentals-tenerife.com">MyRentals</a>
<br/>
    for StackOverflow question:
    <br/>
    <strong>"jQuery multiple select option with image"</strong>
<br/><br/>
http://stackoverflow.com/questions/9047782/jquery-multiple-select-option-with-image
</div>

CSS

#divselktr {width:300px;}
#expln {font-family:Arial;font-size:0.8em;margin:160px 0 0}
.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;}

JavaScript

/* jshint forin:true, noarg:true, noempty:true, eqeqeq:true, boss:true, undef:true, curly:true, browser:true, jquery:true */
/*
 * jQuery MultiSelect UI Widget 1.13
 * Copyright (c) 2012 Eric Hynds
 *
 * http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
 *
 * Depends:
 *   - jQuery 1.4.2+
 *   - jQuery UI 1.8 widget factory
 *
 * Optional:
 *   - jQuery UI effects
 *   - jQuery UI position utility
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 *
 * Altered to allow for image rendering within
 * the option rows by Martin Sansone - MyRentals
 *
*/
(function (d) { var k = 0; d.widget("ech.multiselect", { options: { header: !0, height: 105, minWidth: 46, classes: "", checkAllText: "Check all", uncheckAllText: "Uncheck all", noneSelectedText: "Select options", selectedText: "# selected", selectedList: 0, show: null, hide: null, autoOpen: !1, multiple: !0, position: {} }, _create: function () { var a = this.element.hide(), b = this.options; this.speed = d.fx.speeds._default; this._isOpen = !1; a = (this.button = d('<button type="button"><span class="ui-icon ui-icon-triangle-2-n-s"></span></button>')).addClass("ui-multiselect ui-widget ui-state-default ui-corner-all").addClass(b.classes).attr({ title: a.attr("title"), "aria-haspopup": !0, tabIndex: a.attr("tabIndex") }).insertAfter(a); (this.buttonlabel = d("<span />")).html(b.noneSelectedText).appendTo(a); var a = (this.menu = d("<div />")).addClass("ui-multiselect-menu ui-widget ui-widget-content ui-corner-all").addClass(b.classes).appendTo(document.body), c = (this.header = d("<div />")).addClass("ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix").appendTo(a); (this.headerLinkContainer = d("<ul />")).addClass("ui-helper-reset").html(function () { return !0 === b.header ? '<li><a class="ui-multiselect-all" href="#"><span class="ui-icon ui-icon-check"></span><span>' +...