Display Colorful Values Based on Picklist Value in Lightning Component.

  Please use the below method to display the picklist values in color :

ColorPicklist.Cmp:

<aura:component >

  <!--call onLoad js function on every time component load-->

  <aura:handler name="init" value="{!this}" action="{!c.onLoad}"/>

  

  <aura:attribute name="Color" type="String"/>

  <aura:attribute name="PicklistField" type="String"/>

  

  <div class="slds-truncate"  title="{!v.PicklistField }">

    <span class="slds-badge" style="{! 'background-color: ' + v.Color}"> {!v.PicklistField}</span>

  </div>

</aura:component>

ColorPicklist.JS:

({

  onLoad: function(component, event, helper) {

    console.log('colorCmp load');

    var sName = component.get("v.PicklistField");

 

    if (sName != undefined) {

 

      // **** write picklist values in Lower Case ***** //       

      var tempLowerCase = sName.toLowerCase();

      var cOrange = 'text value1';

      var cYellow = 'text value2';

      var cPink = 'text value3';

      var cLightGreen = 'text value4';

      // ...add more values vaiable here 

 

      // set the color on based on picklist values      

      if (cOrange.indexOf(tempLowerCase) != -1) {

        component.set("v.Color", 'orange');

      } else if (cYellow.indexOf(tempLowerCase) != -1) {

        component.set("v.Color", 'Yellow');

      } else if (cPink.indexOf(tempLowerCase) != -1) {

        component.set("v.Color", 'pink');

      } else if (cLightGreen.indexOf(tempLowerCase) != -1) {

        component.set("v.Color", 'LightGreen');

      }

    }

  },

})