JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
   <div class="row">
            <div class="col-sm-3">
       <div class="btn-group">
    <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
         <span data-bind="label">S </span><span class="caret"></span>

    </button>
    <ul class="dropdown-menu">
        <li><span><img src="http://placehold.it/90x50"> image a</span>
        </li>
        <li><span><img src="http://placehold.it/90x50"> image b</span>
        </li>
        <li><span><img src="http://placehold.it/90x50"> image c</span>
        </li>
        <li><span><img src="http://placehold.it/90x50"> image d</span>
        </li>
        <li><span><img src="http://placehold.it/90x50"> image e</span>
        </li>
        <li><span><img src="http://placehold.it/90x50"> image f</span>
        </li>
    </ul>
</div>
            
            </div></div></div>

CSS

.dropdown-menu span {
    margin:0 12px auto;
    display:block;
        font-size:11px;
       background: rgb(255,255,255);
 -webkit-transition: background 200ms ease-in 100ms; /* property duration timing-function delay */
    -moz-transition: background 200ms ease-in 100ms;
    -o-transition: background 200ms ease-in 100ms;
    transition: background 200ms ease-in 100ms;
}
.dropdown-menu span:hover {
   background: #ececec;
    color:red
}
.dropdown-menu img{
     display:block;
    clear:both
}
.dropdown-menu {
    max-height: 220px;
    max-width: 100px;
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

JavaScript

$(function () {

     $(".dropdown-menu").on('click', 'li span', function () {
         var myIM = $(this).text();
      $target.closest( '.btn-group' )
         .find( '[data-bind="label"]' ).text(myIM)
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );
      return false;
     });

 });