Question

我正在处理订单。客户希望发生以下情况：

如果客户选择6:00 am-9:00 am时间范围，则以红色显示该选择。但是，如果选择了其他时间范围，则将其显示为黑色。

我正在尝试学习jquery / javascript，并尝试了很多事情，但无法实现。任何帮助将不胜感激。

$("#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

Answer 1

尝试下面的代码

$(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>

Answer 2

尝试这个：

$('#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>

Answer 3

您可以这样做：

$(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>

Answer 4

您可以尝试这个- html代码-

<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>

和这里的jQuery-

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

});

将仅一个选定选项的颜色更改为红色，其他所有选项保持黑色

4 个答案: