Untitled

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
  <script>
  $(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 );
      }
    });

    $( "#filesA" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons" );

    $( "#filesB" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons customicons" );

    $( "#people" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget")
        .addClass( "ui-menu-icons avatar" );
  });
  </script>
  <style>
    h2 {
      margin: 30px 0 0 0
    }
    fieldset {
      border: 0;
    }
    label {
      display: block;
    }
    select {
      width: 200px;
    }

    /* 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;
    }
    .ui-icon.video {
      background: url("images/24-video-square.png") 0 0 no-repeat;
    }
    .ui-icon.podcast {
      background: url("images/24-podcast-square.png") 0 0 no-repeat;
    }
    .ui-icon.rss {
      background: url("images/24-rss-square.png") 0 0 no-repeat;
    }

    /* select with CSS avatar icons */
    option.avatar {
      background-repeat: no-repeat !important;
      padding-left: 20px;
    }
    .avatar .ui-icon {
      background-position: left top;
    }
  </style>
</head>
<body>

<div class="demo">

<form action="#">

  <h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
  <fieldset>
    <label for="people">Select a Person:</label>
    <select name="people" id="people">
      <option value="1" data-class="avatar" data-style="background-image: url(&apos;http://retsmgr.discovermls.com/images/delete-16x16.gif&apos;);">John Resig</option>
      <option value="2" data-class="avatar" data-style="background-image: url(&apos;http://retsmgr.discovermls.com/images/delete-16x16.gif&apos;);">Tauren Mills</option>
      <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://retsmgr.discovermls.com/images/delete-16x16.gif&apos;);">Jane Doe</option>
    </select>
  </fieldset>
</form>

</div>

$('#people-menu').click(function(event){
    if($(event.target).is('span.avatar')) {
        $(event.target).parent('li').hide();
    }
});