JSFiddle - React, Tailwind, and code Playground

by kitikonti

HTML

<html>
<head>
  <title>Image Select</title>
  <script type="text/javascript">
    
    (function($){
      $(function() {
        $('select[name="sports"]').imageSelect({
          src:{
            skiing:"http://www.clker.com/cliparts/9/4/2/3/12550940831326752382Olympic_sports_Alpine_skiing_pictogram.svg.med.png",
            curling:"http://www.clker.com/cliparts/1/e/5/a/125509436129058689Olympic_sports_Curling_pictogram.svg.med.png",
            football:"http://www.clker.com/cliparts/b/a/f/0/12550945211297607076Olympic_sports_Football_pictogram.svg.med.png",
            cycling:"http://www.clker.com/cliparts/3/4/1/a/12550943941430785792Olympic_sports_Cycling_(mountain_biking)_pictogram.svg.med.png",
            boxing:"http://www.clker.com/cliparts/1/6/9/d/12550942571508683330Olympic_sports_Boxing_pictogram.svg.med.png"
          },
        });
      });
    })(jQuery);

  </script>
</head>

<body>
  
<select name="sports">
  <option value="skiing" selected="selected">Skiing</option>
  <option value="curling">Curling</option>
  <option value="football">Football</option>
  <option value="cycling">Cycling</option>
  <option value="boxing">Boxing</option>
</select>
  
</body>
</html>

CSS

/*************************************************************
jquery.imageselect.css
*************************************************************/
.imageselect,
.imageselect ul,
.imageselect li,
.imageselect img {
  margin: 0;
  padding: 0;
}

.imageselect {
  position:relative;
}

.imageselect select {
  display:none;
}

.imageselect ul {
  display:block;
  float:left;
}

.imageselect li {
  display:none;
}

.imageselect li.selected {
  display:inline-block;
}

/*************************************************************
sample.css
*************************************************************/
.imageselect ul {
  border:1px solid #ccc;
  border-radius: 8px;
  box-shadow:0 0 0 0 #ddd;
  -webkit-transition: box-shadow 300ms ease-in-out;
}

.imageselect ul:hover,
.imageselect ul.expanded {
  box-shadow:2px 2px 5px 0px #ddd;
  -webkit-transition: box-shadow 300ms ease-in-out;
}

.imageselect li {
  padding:5px;
  border-radius: 8px;
  -webkit-transition: background 300ms ease-in-out;
}

.imageselect li:hover {
  background:yellow;
  cursor:pointer;
  -webkit-transition: background 300ms ease-in-out;
}

.imageselect img {
  height:50px;
  width:50px;
}

JavaScript

/*************************************************************
jquery.imageselect.js
*************************************************************/
(function( $ ) {
  $.fn.imageSelect = function(options) {
    
    // set default options
    var options = $.extend( {
      title:true,
      alt:true
    }, options);

    return this.each(function() {     
      // get all options
      var selectOptions = $(this).children('option');
      
      // generate new UI as <ul>
      var ui = '<ul>';
      $(selectOptions).each(function(i) {    
        // get the value of current option
        var value = $(this).attr('value');
        var text = $(this).text();
        
        // transfer option text to image title
        var title = '';
        if (options.title) {
          title = ' title="'+text+'"';
        }
        
        // transfer option text to image alt
        var alt = '';
        if (options.alt) {
          alt = ' alt="'+text+'"';
        }
        
        // create <img>
        var img = '<img'+title+alt+' src="'+options.src[value]+'" />';
        
        // transfer selected attribute to selected class
        var active = '';
        if ($(this).attr('selected') == 'selected') {
          active = ' class="selected"';
        }
        
        // create li, option.value => li.rel # option.selected => li.class
        ui += '<li rel="'+value+'"'+active+'>'+img+'</li>';
        
      });   
      // end list of options
      ui += '</ul>';
      
      // wrap select with div to have a common container for old and new UI
      $(this).wrap('<div id="imageselect_'+$(this).attr('name')+'" class="imageselect"></div>');
      
      // append new UI to common wrapper
      $(this).parent().append(ui);
      
      // init click show options
      $('.imageselect').delegate(' li.selected','click',function() {
        // shows hidden options
        $('.imageselect li').not('.selected').fadeIn();
        $('.imageselect...