JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

<div style="height:100%;" data-role="page" data-theme="b" >
  <div data-role="content">

<select data-inline="true" data-native-menu="false" data-theme="d" data-val="true" data-val-number="The field DropletId must be a number." data-val-required="The DropletId field is required." id="Droplet" name="Plan.DropletId" style="margin-right:0px;">

<option value="1">Ultra Coarse (UC)</option>
<option value="2">Extra Coarse (XC)</option>
<option selected="selected" value="3">Very Coarse (VC)</option>
<option value="4">Coarse (C)</option>
<option value="5">Medium (M)</option>
<option value="6">Fine (F)</option>
<option value="7">Very Fine (VF)</option>
<option value="8">Extra Fine (XF)</option>
</select>
  </div>
</div>

CSS

.droplet1 {background-color:Red; color: White; text-shadow: #3373A5 0px 1px 1px;}
.droplet2 {background-color:Blue; color: White; text-shadow: #3373A5 0px 1px 1px;}
.droplet3 { background-color:Green; color: White; text-shadow: #3373A5 0px 1px 1px;}
.droplet4 { background-color:Yellow; color: Black;}
.droplet5 { background-color:Black; color: White; text-shadow: #3373A5 0px 1px 1px;}
.droplet6 { background-color: Fuchsia; color: White; text-shadow: #3373A5 0px 1px 1px}
.droplet7 {background-color:Aqua; color: Black;}
.droplet8 { background-color:Olive; color: White; text-shadow: #3373A5 0px 1px 1px;}

#Droplet-menu li:nth-child(1) >  div{background-color:Red; }
#Droplet-menu li:nth-child(1) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

#Droplet-menu li:nth-child(2) > div{background-color:Blue;}
#Droplet-menu li:nth-child(2) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

#Droplet-menu li:nth-child(3) > div{background-color:Green;}
#Droplet-menu li:nth-child(3) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

#Droplet-menu li:nth-child(4) >  div{background-color:Yellow;}
#Droplet-menu li:nth-child(4) >  div > div > a {color: #333333 !important;}

#Droplet-menu li:nth-child(5) > div{ background-color:Black;}
#Droplet-menu li:nth-child(5) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

#Droplet-menu li:nth-child(6) > div{background-color: Fuchsia;}
#Droplet-menu li:nth-child(6) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

#Droplet-menu li:nth-child(7) > div{background-color:Aqua;}
#Droplet-menu li:nth-child(7) >  div > div > a {color: #333333 !important;}

#Droplet-menu li:nth-child(8) > div{background-color:Olive;}
#Droplet-menu li:nth-child(8) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

JavaScript

var prevClass = "";

  $(document).ready(function () {
    //alert('ShowWorkOrder document ready function fired.');
    //get current droplet value
    var selDroplet = $("#Droplet option:selected").attr('value');
    var dropletCssClass = "droplet" + selDroplet;
    //alert("dropletCssClass: " + dropletCssClass);
    //$('#Droplet-button span:nth-of-type(1)').removeClass();
    $('#Droplet-button span:nth-of-type(1)').addClass(dropletCssClass);
  });

  $("#BoomHeight").change(function () {
    $("#BoomHeight option:selected").each(function () {
      var val = $(this).attr('value');
      $("#SelectedBoomHeight").val(val);
      //alert($("#SelectedBoomHeight").val());
    });

  })
  .change();


  $("#Droplet").change(function () {
    var str = "";
    
    $("#Droplet option:selected").each(function () {
      str = "droplet" + $(this).attr('value');
      //str += $(this).attr('class') + " ";
      
      $("#SelectedDroplet").val($(this).attr('value'));
      //alert(str);
      $('#Droplet-button span:nth-of-type(1)').removeClass(prevClass);
      $('#Droplet-button span:nth-of-type(1)').addClass(str);
      prevClass = str;
    });
    //    $("#dropleticon").removeClass(); per task 6787
    //    $("#dropleticon").addClass(str);

  })
  .change();