Question

我试图弄清楚如何在选择时仅更改一个选定项目的颜色。我确定它可以用jquery完成，但我不知道如何。我想在上午6:00到9:00的时间段选择时变为红色。我创建了一个Codepen来测试它：https://codepen.io/JapperCat/pen/mLQjwx

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
</head>

<body>

<div class="">
<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="text-danger" style="font-weight:bold;" 
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>

</div> <!-- end of row -->

<script>
$(document).ready(function(){
$("#reqDeliveryTime_1").click(function(){
   $(this).css("color", "red");
});

}）;

Answer 1

请试试这个，希望对你有所帮助：

$('#reqDeliveryTime').change(function () {
  $(this).find('option:selected').css('background-color', 'red');
}).trigger('change');

选择该选项后，仅更改一个选择的颜色

1 个答案: