JSFiddle - React, Tailwind, and code Playground

by Hema Nandagopal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


  <select multiple name="device[]" id="device" class="form-control" >
                                    <option value=\'ALL\' >ALL</option><option value=\'Android\'>Android</option><option value=\'iPod\'>iPod</option><option value=\'iPad\'>iPad</option><option value=\'Java\'>Java</option><option value=\'Windows\'>Windows</option><option value=\'Linux\'>Linux</option><option value=\'Mac\'>Mac</option>                             </select>
									   <select multiple name="country[]" id="country" class="form-control" >
                                    <option value=\'ALL\' >ALL</option><option value=\'BD\'>Bangladesh</option><option value=\'IN\'>India</option><option value=\'ID\'>Indonesia</option><option value=\'NG\'>Naigeria</option><option

 value=\'PK\'>Pakistan</option></select>

CSS

.ashClass {
  color: #ccc;
}
.blackClass {
  color: black;
}

JavaScript

$('#device option').click(function(){
 var Allselected = $('#device :selected').text();
  var AllselectedCountry = $('#country :selected').text();
 if(Allselected =="ALL"){ 
$('#device option:not(:selected)').addClass('ashClass');
 }
 else if (Allselected !="ALL"){
$('#device option:first-child').css('color', '#ccc');
$('#device option:not(:selected)').removeClass('ashClass');
 } 
 });
  $('#country option').click(function(){
   var AllselectedCountry = $('#country :selected').text();
   if(AllselectedCountry =="ALL"){ 
$('#country option:not(:selected)').addClass('ashClass');
 }
 else if (AllselectedCountry !="ALL"){
$('#country option:first-child').css('color', '#ccc');
$('#country option:not(:selected)').removeClass('ashClass');
 
 }
 });