Change color of only one selected option to RED, keep all other selections black

Question

I'm working on an order form. The client wants the following to happen:

If the customer selects 6:00am - 9:00am time frame, display that selection in RED. But if any other time frame is selected, display it in black.

I'm trying to learn jquery/javascript and have tried many things but cannot make this happen. Any help is greatly appreciated.

$("#reqDeliveryTime_1").change(function() {
  $(this).css('color','red')
})

body { 
    font-size: 1rem;
    color:black;
    font-weight: 400;
    line-height: 1.5;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 600px;
} 
    
.boldRed{
  font-weight:bold; 
  color:red;
} 

fieldset{
  padding-bottom: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>    
    <fieldset>
      <legend>DELIVERY TIME</legend>    
      <h2>Please choose your delivery time</h2>     
      <p style="font-style:italic;">
        NOTICE: 6:00am-9:00am DELIVERY TIME IS A RAIN AND OR SHINE ORDER ONLY.     </p>    
      <label for="reqDeliveryTime"><strong>Requested Delivery Time:</strong>&nbsp;</label>    
      <select name="reqDeliveryTime" id="reqDeliveryTime" required data-hint="Please choose at least one"> 
        <option id="reqDeliveryTime_0" selected value="Choose a Delivery Time" required>    
           Choose a delivery time    
        </option>    
        <option id="reqDeliveryTime_1" class="boldRed"  value="6:00 am - 9:00 am"> 6:00 am - 9:00 am             </option>    
        <option id="reqDeliveryTime_2" value="8:00 am - 12:00 pm"> 8:00 am - 12:00 pm </option>    
        <option id="reqDeliveryTime_3" value="10:00 am - 2:00 pm"> 10:00 am - 2:00 pm </option>    
        <option id="reqDeliveryTime_4" value="12:00 pm - 4:00 pm"> 12:00 pm - 4:00 pm </option>    
        <option id="reqDeliveryTime_5" value="2:00 pm - 6:00 pm"> 2:00 pm - 6:00 pm </option>    
      </select>    
   </fieldset>     
</form>

Here is the CodePen link

Exactly what's supposed to be displayed in red/black? The drop down already does this. — freedomn-m, Aug 02 '18 at 13:02
this is a working example : https://codepen.io/anon/pen/vajxXN?editors=1010 — Vecihi Baltacı, Aug 02 '18 at 13:14
If any other time frame is selected the color displayed should remain black. However, if the customer selects the 6:00am-9:00am time frame, the color should be displayed in RED. With the current code, the 6-9am time frame is red but once its selected it displays in black. I need it to be RED so it alerts the customer that they have chosen a critical time frame. — JappperCat, Aug 02 '18 at 13:27
@JappperCat Did you try my example? https://codepen.io/anon/pen/BPxpgL — Carsten Løvbo Andersen, Aug 02 '18 at 13:28
@CarstenLøvboAndersen That would work but how come the change doesnt happen until I click outside of the selection box. How can I fix it? — JappperCat, Aug 02 '18 at 13:51
@CarstenLøvboAndersen your answer really helped. Here is my latest codepen with the result: https://codepen.io/JapperCat/pen/RBygWE — JappperCat, Aug 02 '18 at 14:40

score 1 · Answer 1 · answered Aug 02 '18 at 13:05

Try below code

$(function(){
$("#reqDeliveryTime").on("change", function() {
    var value = $(this).val();
    $(this).find('option').removeClass('boldRed');
    $(this).find('option[value="' + value + '"]').addClass('boldRed');
});
});

body { 
font-size: 1rem;
color:black;
font-weight: 400;
line-height: 1.5;
padding: 15px;
margin-right: auto;
margin-left: auto;
max-width: 600px;
}   
.boldRed{font-weight:bold; color:red;}  
  fieldset{padding-bottom: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <p style="color:blue">
Please change the code and or script to make this happen: <br>
  If the customer selects 6:00am - 9:00am time frame, display that selection in <span style="color:red">RED. </span>  But if any other time frame is selected, display it in <span style="color:black">BLACK</span>.</p>

<form>

<fieldset>
<legend>DELIVERY TIME</legend>

<h2>Please choose your delivery time</h2>

<p style="font-style:italic;">NOTICE: 6:00am-9:00am DELIVERY TIME IS A RAIN AND OR SHINE ORDER ONLY.</p>

<label for="reqDeliveryTime"><strong>Requested Delivery Time:</strong>&nbsp;</label>

<select name="reqDeliveryTime"  id="reqDeliveryTime" required data-hint="Please choose at least one">

<option id="reqDeliveryTime_0" selected value="Choose a Delivery Time" required>

Choose a delivery time

</option>

<option id="reqDeliveryTime_1" value="6:00 am - 9:00 am"> 6:00 am - 9:00 am </option>

<option id="reqDeliveryTime_2" value="8:00 am - 12:00 pm"> 8:00 am - 12:00 pm </option>

<option id="reqDeliveryTime_3" value="10:00 am - 2:00 pm"> 10:00 am - 2:00 pm </option>

<option id="reqDeliveryTime_4" value="12:00 pm - 4:00 pm"> 12:00 pm - 4:00 pm </option>

<option id="reqDeliveryTime_5" value="2:00 pm - 6:00 pm"> 2:00 pm - 6:00 pm </option>

</select>

</fieldset> 

</form>

Not sure that is what the OP wants, based on this `If the customer selects 6:00am - 9:00am time frame, display that selection in RED. But if any other time frame is selected, display it in black.` — Carsten Løvbo Andersen, Aug 02 '18 at 13:09
@Emeeus, once you select option and open again you will see red color on it. but as per Carsten comments i also got confused what exactly OP wants :) — Bhushan Kawadkar, Aug 02 '18 at 13:11
@BhushanKawadkar I believe this is more like what the op wants. https://codepen.io/anon/pen/BPxpgL — Carsten Løvbo Andersen, Aug 02 '18 at 13:12
Ok, I see, works in chrome but not in firefox (61.0.1) Linux — Emeeus, Aug 02 '18 at 13:16

riyas · Accepted Answer · 2018-08-02T13:45:35.283

Try this one:

$('#reqDeliveryTime').on('change', function(e) {
  var optionSelected = $("option:selected", this);
  if (this.value === '6:00 am - 9:00 am') {
    $('#reqDeliveryTime').addClass("boldRed");
  } else {
    $('#reqDeliveryTime').removeClass("boldRed");
  }
});

body {
  font-size: 1rem;
  color: black;
  font-weight: 400;
  line-height: 1.5;
  padding: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;
}

.boldRed {
  font-weight: bold;
  color: red;
}

fieldset {
  padding-bottom: 50px;
}

.colorBlack {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<form>
  <fieldset>
    <legend>DELIVERY TIME</legend>
    <h2>Please choose your delivery time</h2>
    <p style="font-style:italic;">NOTICE: 6:00am-9:00am DELIVERY TIME IS A RAIN AND OR SHINE ORDER ONLY.</p>
    <label for="reqDeliveryTime"><strong>Requested Delivery Time:</strong>&nbsp;</label>
    <select name="reqDeliveryTime" id="reqDeliveryTime" required data-hint="Please choose at least one">
      <option id="reqDeliveryTime_0" class="colorBlack" selected value="Choose a Delivery Time" required>
        Choose a delivery time
      </option>
      <option id="reqDeliveryTime_1" class="colorBlack" value="6:00 am - 9:00 am"> 6:00 am - 9:00 am </option>
      <option id="reqDeliveryTime_2" class="colorBlack" value="8:00 am - 12:00 pm"> 8:00 am - 12:00 pm </option>
      <option id="reqDeliveryTime_3" class="colorBlack" value="10:00 am - 2:00 pm"> 10:00 am - 2:00 pm </option>
      <option id="reqDeliveryTime_4" class="colorBlack" value="12:00 pm - 4:00 pm"> 12:00 pm - 4:00 pm </option>
      <option id="reqDeliveryTime_5" class="colorBlack" value="2:00 pm - 6:00 pm"> 2:00 pm - 6:00 pm </option>
    </select>
  </fieldset>
</form>

At least this *finally* answers what it was you were actually trying to do! — freedomn-m, Aug 02 '18 at 14:52

score 0 · Answer 3 · answered Aug 02 '18 at 13:19

You can do like this:

$(document).ready(function(){
  $("#reqDeliveryTime").change(function() {
  if($(this).val() == "6:00 am - 9:00 am"){
   var id =  $(this).find("option:selected").css('color','red');
    }
   else{
   $(this).find("option").css('color','black')
   }
  })
});

body { 
    font-size: 1rem;
    color:black;
    font-weight: 400;
    line-height: 1.5;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 600px;
    } 
 .boldRed{font-weight:bold; color:red;} 
 fieldset{padding-bottom: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color:blue">
    Please change the code and or script to make this happen: <br>
      If the customer selects 6:00am - 9:00am time frame, display that selection in <span style="color:red">RED. </span>  But if any other time frame is selected, display it in <span style="color:black">BLACK</span>.</p>
    
 <form>
    <fieldset>
    <legend>DELIVERY TIME</legend>
    
    <h2>Please choose your delivery time</h2>
     
    <p style="font-style:italic;">NOTICE: 6:00am-9:00am DELIVERY TIME IS A RAIN AND OR SHINE ORDER ONLY.</p>
    
    <label for="reqDeliveryTime"><strong>Requested Delivery Time:</strong>&nbsp;</label>
    
    <select name="reqDeliveryTime"  id="reqDeliveryTime" required data-hint="Please choose at least one">
    
    <option id="reqDeliveryTime_0" selected value="Choose a Delivery Time" required>
    
    Choose a delivery time
    
    </option>
    
    <option id="reqDeliveryTime_1"  value="6:00 am - 9:00 am"> 6:00 am - 9:00 am </option>
    
    <option id="reqDeliveryTime_2" value="8:00 am - 12:00 pm"> 8:00 am - 12:00 pm </option>
    
    <option id="reqDeliveryTime_3" value="10:00 am - 2:00 pm"> 10:00 am - 2:00 pm </option>
    
    <option id="reqDeliveryTime_4" value="12:00 pm - 4:00 pm"> 12:00 pm - 4:00 pm </option>
    
    <option id="reqDeliveryTime_5" value="2:00 pm - 6:00 pm"> 2:00 pm - 6:00 pm </option>
    
    </select>
    
    </fieldset> 
    
</form>

score 0 · Answer 4 · answered Aug 02 '18 at 13:40

You can try this one - html code -

<select name="reqDeliveryTime"  id="reqDeliveryTime" required data-hint="Please 
   choose at least one">

 <option  value="Choose a Delivery Time" required>

Choose a delivery time

</option>

<option value="6:00 am - 9:00 am"> 6:00 am - 9:00 am </option>

<option  value="8:00 am - 12:00 pm"> 8:00 am - 12:00 pm </option>

<option value="10:00 am - 2:00 pm"> 10:00 am - 2:00 pm </option>

<option value="12:00 pm - 4:00 pm"> 12:00 pm - 4:00 pm </option>

<option  value="2:00 pm - 6:00 pm"> 2:00 pm - 6:00 pm </option>

</select>

and jquery here -

$('#reqDeliveryTime').change(function(){
        if($(this).val() == '6:00 am - 9:00 am'){
            $(this).css('color','red');
        }else{
             $(this).css('color','black');
        }

});

Change color of only one selected option to RED, keep all other selections black

4 Answers4