如何用jQuery实现选中特定下拉选项时单独改变其颜色？

你遇到的问题其实是因为直接监听<option>的click事件在浏览器里兼容性不好，而且下拉框的选中状态变化应该通过监听<select>的change事件来处理更可靠。下面是具体的解决方法：

核心思路 #

1. 监听下拉选择框的change事件，每当选中项变化时触发逻辑
2. 检查当前选中的是否是目标选项（"6:00 am - 9:00 am"）
3. 如果是，给该选项设置红色；切换到其他选项时，恢复原有样式

修改后的完整代码 #

HTML部分（保留你的原有结构）

<!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>
  <style>
    /* 用CSS类统一管理样式，比直接操作css()更易维护 */
    .selected-red {
      color: red !important;
      font-weight: bold;
    }
  </style>
</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" 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(){
  // 监听下拉框的change事件
  $("#reqDeliveryTime").on("change", function(){
    // 先移除所有选项的红色样式，避免残留
    $(this).find("option").removeClass("selected-red");
    // 获取当前选中的选项
    const selectedOption = $(this).find("option:selected");
    // 判断是否是目标选项（支持通过ID或value判断，更灵活）
    if(selectedOption.attr("id") === "reqDeliveryTime_1" || selectedOption.val() === "6:00 am - 9:00 am"){
      selectedOption.addClass("selected-red");
    }
  });
  
  // 页面加载时检查默认选中项，如果是目标选项就应用样式
  const initialSelected = $("#reqDeliveryTime").find("option:selected");
  if(initialSelected.attr("id") === "reqDeliveryTime_1"){
    initialSelected.addClass("selected-red");
  }
});
</script>
</body>
</html>

为什么原来的代码不生效？ #

• 大部分浏览器不会触发<option>的click事件，因为下拉框的交互逻辑由浏览器原生控制，直接监听option点击不可靠
• 没有处理切换选项后的样式重置，可能导致之前的红色样式残留

额外优化点 #

• 用CSS类代替直接操作css()，方便后续修改样式（比如调整颜色、添加其他视觉效果）
• 增加了页面初始化时的样式检查，如果默认选中目标选项也会显示红色
• 同时支持通过ID和value判断目标选项，适配不同场景需求

内容的提问来源于stack exchange，提问作者JappperCat