JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/mint-choc/jquery-ui.css">
<table>
<tr>
<td style="width: 100px; min-width: 100px; max-width: 100px;">Liste</td>
<td style="width: 100px; min-width: 100px; max-width: 100px;">Liste a reset</td>
</tr>
<tr>
<td class="SsCssTd">
<select class="TFOlstJquery lstHeader" id="people0">
<option value="" selected="selected">TOUS</option>
<option value="/Images/imgres.jpg" data-style="background-image: url('https://www.webkit.org/blog-files/acid3-100.png');"> </option>
<option value="/Images/imgres.png" data-style="background-image: url('https://www.webkit.org/blog-files/acid3-100.png');"> </option>
</select>
</td>
<td class="SsCssTd">
<select class="TFOlstJquery lstHeader" id="people">
<option value="" selected="selected">TOUS</option>
<option value="/Images/imgres.jpg" data-style="background-image: url('https://www.webkit.org/blog-files/acid3-100.png');"> </option>
<option value="/Images/imgres.png" data-style="background-image: url('https://www.webkit.org/blog-files/acid3-100.png');"> </option>
</select>
</td>
</tr>
</table>
<button id="rest">Reset</button>
CSS
.ui-selectmenu-button span.ui-selectmenu-text
{
font-size: small;
padding-right: 0px;
width: 90%;
}
.ui-selectmenu-button span.ui-selectmenu-text.TFOselectmenu-textDecalTxt
{
padding-left: 30px;
}
/*Affichage des options*/
.ui-menu .ui-menu-item
{
padding: 0.5em 0 0.5em 2.1em;
font-size: small;
}
ul.ui-menu
{
max-height: 420px;
width: 100%;
}
.TFOSizeImgOnlySelected
{
position: absolute;
left: 33%;
}
.TFOSizeImgTxtSelected
{
position: absolute;
left: 5%;
top: 4px;
}
.TFOOptlstFiltreImg
{
background-size: 24px 24px;
height: 24px;
width: 24px;
background-repeat: no-repeat;
}
.lstHeader
{
display: block;
padding-top: 2px;
padding-bottom: 2px;
}
td.SsCssTd
{
padding: 0;
border: 0;
}
JavaScript
$.widget("custom.TFOiconSelectImg", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>", { html: item.element.html() });
var attr = item.element.attr("data-style");
if (typeof attr !== typeof undefined && attr !== false) {
$("<span>", { style: item.element.attr("data-style"), "class": "ui-icon TFOOptlstFiltreImg" }).appendTo(li);
}
return li.appendTo(ul);
}
});
yy();
$("#rest").button();
$("#rest").click(function () {
$("#people").TFOiconSelectImg("destroy");
$("#people0").val("").TFOiconSelectImg("refresh");
yy();
return false;
});
function yy() {
$(".TFOlstJquery").TFOiconSelectImg({
create: function (event, ui) {
var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last"); var elem = $(this).children(":first"); var styl = elem.data("style"); var HasTxt = ($.trim(elem.text()).length > 0);
if (HasTxt && styl) { $SpanTxt.addClass("TFOselectmenu-textDecalTxt") } else { $SpanTxt.removeClass("TFOselectmenu-textDecalTxt") }
if (styl) { $span = $('<span class="' + (HasTxt ? "TFOSizeImgTxtSelected" : "TFOSizeImgOnlySelected") + ' TFOOptlstFiltreImg"> ').appendTo($SpanTxt); $span.attr("style", styl); }
widget.addClass("lstHeader"); widget.css({ 'width': '' });
},
select: function (event, ui) {
var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last"); var elem = ui.item.element; var styl = elem.data("style"); $SpanTxt.attr('title', $SpanTxt.text()); var HasTxt = ($.trim(elem.text()).length > 0);
...