JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<p>I am a 
  <span class="select-wrapper">
    <label>.....</label>
    <select>
      <option value="">--- Select ---</option>
      <option value="Man">Man</option>
      <option value="Woman">Woman</option>
    </select>
  </span> and I like <span class="select-wrapper">
    <label>.....</label>
    <select>
      <option value="">--- Select ---</option>
      <option value="Golf">Golf</option>
      <option value="Running">Running</option>
    </select>
  </span>
</p>

SCSS

.select-wrapper {
  position: relative;
  select {
    opacity: 0;
    position: absolute;
    left: 0;
  }
}

JavaScript

(function($) {
	$(function() {
  
  	$(document).on('change', '.select-wrapper select', function(e) {
    	var label = $(this).prev(),
      		selected = $(this).find(':selected');
      label.text(selected.length > 0 && selected.val() ? selected.text() : '.....');
    });
  
  });
})(jQuery);