Html 在选定选项中保持文本颜色

我已经创建了一个HTML表单，其中有3个单独的下拉列表，分别是“程序”、“单位”、“位置”，我希望选中的选项文本在选中时保持文本颜色（默认为黑色）

有20多个项目，100多个单位，60多个地点。程序颜色与相应的单元和位置颜色匹配

这将允许表单用户更容易地查找选择，并在提交之前验证这些选择。（颜色匹配吗？）

节目：
选择一个
选择一个
选择一个

我将使用jQuery来实现这一点：请参见

创建一个每次更改选择时运行的函数，并根据新选择的值更改颜色

jQuery：

var select = $('#program');

select.change(function() {
    if (select.val() == "One") {
        select.css('color','#000000');
    }
    else if (select.val() == "Two") {
        select.css('color','#ff0000');      
    }
    else {
        select.css('color','#00ff00');
    }
});

HTML（我刚刚在您的

select

元素中添加了

#program

的id）：

---

上面的CSS从

select

元素中删除了默认浏览器样式，我认为这可能是默认颜色为黑色的问题。然后，您可以将自己的样式添加到

选择

-

填充

、

边框半径

、

边框

、

背景

等中。

纯CSS无法实现这一点。您可能希望显示选定的

选项

，但从技术上讲，显示选定的

选项

的文本。要实现这一点，您需要使用JavaScript。

var select = $('#program');

select.change(function() {
    if (select.val() == "One") {
        select.css('color','#000000');
    }
    else if (select.val() == "Two") {
        select.css('color','#ff0000');      
    }
    else {
        select.css('color','#00ff00');
    }
});

<p>
    <label for="name">Program: </label>
    <select type="list" name="Program" id="program">
        <option style="color:#000000">One</option>
        <option style="color:#FF0000">Two</option>
        <option style="color:#000099">Three</option>
    </select>
</p>

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}