JSFiddle - React, Tailwind, and code Playground

by Adil Heybətov

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<title>jQuery UI Selectmenu - Custom Rendering</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<body>
    <select name="people" id="people">
      
    </select>
</body>

CSS

#people {
  width: 500px;
}


/* select with custom icons */

/* .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
  padding: 0.5em 0 0.5em 3em;
}

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
  height: 24px;
  width: 24px;
  top: 0.1em;
}
 */

/* select with CSS avatar icons */

option.avatar {
  background-repeat: no-repeat !important;
  padding-left: 20px;
}

.avatar .ui-icon {
  background-position: left top;
}

JavaScript

$(function() {
  $.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function(ul, item) {
      var li = $("<li>", {
        text: item.label
      });
      if (item.disabled) {
        li.addClass("ui-state-disabled");
      }
      $("<span>", {
          style: item.element.attr("data-style"),
          "class": "ui-icon " + item.element.attr("data-class")
        })
        .appendTo(li);
      return li.appendTo(ul);
    }
  });


  $.ajax({
    url: "https://restcountries.eu/rest/v2/all?fields=name;callingCodes;flag",
    success: function(data) {
      var people = $("#people")
      people.html("");
      str = "";
      data.forEach(function(node, index) {
        str += `<option   value='${index}' data-class='avatar' data-style="background: url(${node.flag}) center/cover" > +${node.callingCodes} </option>`
      })
      people.html(str);
      $("#people")
        .iconselectmenu()
        .iconselectmenu("menuWidget")
        .addClass("ui-menu-icons avatar");
    }
  })


});