JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.2/css/themes/default/jquery.mobile-1.4.2.min.css">
<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.min.js"></script>
<div class="ui-field-contain">
<label for="select-custom-18">Popup List</label>
<select name="select-custom-18" id="select-custom-18" data-native-menu="false">
<option value="1" data-image="https://api.jquerymobile.com/resources/listview/images/album-bb.jpg">Broken Bells</option>
<option value="2" data-image="https://api.jquerymobile.com/resources/listview/images/album-hc.jpg">Warning</option>
<option value="3" data-image="https://api.jquerymobile.com/resources/listview/images/album-p.jpg">Wolfgang Amadeuys Phoenix</option>
</select>
</div>
JavaScript
$(document).on("pagecreate", function() {
var opts = $("#select-custom-18 option");
$("#select-custom-18-listbox-popup").on("popupafteropen", function(event, ui) {
$("#select-custom-18-menu li").each(function(index) {
if ($(this).find("img").length == 0) {
var imageURL = opts.eq(index).data("image");
var imgElem = '<img src=' + imageURL + ' width="32px" height="32px" />';
$(this).find("a").prepend(imgElem);
}
});
});
});