如何实现选中select下拉框首项时文本为灰色、其余选项为白色？

云上老周

2026-9-27

问题原因

你现有代码的错误点有两个：

第一版代码中，jQuery的each方法回调第一个参数是索引值，第二个参数才是当前遍历的DOM元素，你直接拿第一个参数当作元素操作，逻辑无法生效
第二版代码直接用类选择器.first-child-gray-select全局操作元素，会匹配所有三个下拉框，自然一改全改

解决代码

$(".first-child-gray-select").change(function () {
    // $(this)指向当前触发change事件的单个下拉框
    const $currentSelect = $(this);
    // 只查找当前下拉框下的选中项，不涉及其他下拉框
    const $selectedOpt = $currentSelect.find("option:selected");
    
    if ($selectedOpt.hasClass("text-white")) {
        $currentSelect.removeClass("text-gray-500").addClass("text-white");
    } else {
        // 可选逻辑：如果需要支持切回首项时恢复灰色，保留这段即可
        $currentSelect.removeClass("text-white").addClass("text-gray-500");
    }
});

// 页面加载完成后主动触发一次，保证初始状态样式匹配选中项
$(".first-child-gray-select").trigger("change");