Javascript 选择文本颜色

我正在尝试制作一个下拉菜单，让您可以选择颜色的名称，它们应该以该颜色显示。所以红色应该是红色，蓝色应该是蓝色，等等。我希望它们在你查看列表、悬停在上面以及被选中时保持不变。到目前为止，我已经将它们正确地显示在列表中，并在悬停时显示，但在选中时显示不正确

$（文档）.ready（函数（）{
$（“.pickerSelectClass”）.selectpicker（）；
$（“#选择”）。选择器（“刷新”）；
$（'.filter option'）.css（“颜色”、“绿色”）；
});
。选择容器{宽度：200px}

红色
蓝色
替换
$（'.filter option'）.css（“颜色”、“绿色”）
by
$（'.filter option'）.css（“color”，$（'#select'）.val（））

如果您不介意更改值以匹配颜色，则可以执行以下操作：

  $('#select').on('change', function(){
    $('.filter-option').css('color', $(this).val());
  });

例如：

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>


红色
蓝色
替换
$（'.filter option'）.css（“颜色”、“绿色”）
by
$（'.filter option'）.css（“color”，$（'#select'）.val（））

如果您不介意更改值以匹配颜色，则可以执行以下操作：

  $('#select').on('change', function(){
    $('.filter-option').css('color', $(this).val());
  });

例如：

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>


红色
蓝色
您可以使用颜色添加数据属性，并在更改时进行检查，这样您就可以将颜色添加到所选选项中，或者您可以使用类名作为字体颜色，但我认为数据属性更好


$（文档）.ready（函数（）{
//$（“.pickerSelectClass”）.selectpicker（）；
//$（“#选择”）。选择器（“刷新”）；
$（'.filter option'）.css（“颜色”、“绿色”）；
$（“.pickerSelectClass”）。在（'change'，function（）上{
var optionSelected=$（“选项：已选择”，此选项），
fontColor=$（选项已选）。数据（'color'）；
$（this.css（'color'，fontColor）；
})
//以类名作为字体颜色的示例
$（“.exampleClassname”）.on（'change'，function（）{
var optionSelected=$（“选项：已选择”，此选项），
fontColor=$（optionSelected）.attr（'class'）；
$（this.css（'color'，fontColor）；
})
});
.selectContainer{width:200px；}
.pickerSelectClass{颜色：红色；}
.red{color:red；}
.blue{color:blue；}

红色
蓝色
使用类名的示例
红色
蓝色
您可以使用颜色添加数据属性，并在更改时进行检查，这样您就可以将颜色添加到所选选项中，或者您可以使用类名作为字体颜色，但我认为数据属性更好


$（文档）.ready（函数（）{
//$（“.pickerSelectClass”）.selectpicker（）；
//$（“#选择”）。选择器（“刷新”）；
$（'.filter option'）.css（“颜色”、“绿色”）；
$（“.pickerSelectClass”）。在（'change'，function（）上{
var optionSelected=$（“选项：已选择”，此选项），
fontColor=$（选项已选）。数据（'color'）；
$（this.css（'color'，fontColor）；
})
//以类名作为字体颜色的示例
$（“.exampleClassname”）.on（'change'，function（）{
var optionSelected=$（“选项：已选择”，此选项），
fontColor=$（optionSelected）.attr（'class'）；
$（this.css（'color'，fontColor）；
})
});
.selectContainer{width:200px；}
.pickerSelectClass{颜色：红色；}
.red{color:red；}
.blue{color:blue；}

红色
蓝色
使用类名的示例
红色
蓝色
陈述您的问题。你在问什么？我的问题是我该怎么做我解释的。如果你看一下JSFIDLE，你会发现当你点击下拉菜单时，红色和蓝色会显示为正确的颜色，即使在鼠标悬停在上方，这也是我想要的，但是当选择一个时，它不会保持正确的颜色。请在你的问题中给出解释，而不是评论或JSFIDLE。链接死了，说“看小提琴”对未来的任何人都没有任何好处。陈述你的问题。你在问什么？我的问题是我该怎么做我解释的。如果你看一下JSFIDLE，你会发现当你点击下拉菜单时，红色和蓝色会显示为正确的颜色，即使在鼠标悬停在上方，这也是我想要的，但是当选择一个时，它不会保持正确的颜色。请在你的问题中给出解释，而不是评论或JSFIDLE。链接死了，说“看小提琴”对未来的任何人都没有好处。不幸的是，这打破了我试图保持的悬停行为。现在突出显示的是标准的蓝色背景和白色文本，我希望悬停在上面时颜色保持不变。另外，当你第一次加载它时，它显示为红色，但在你进入并选择之前，它实际上不会显示为红色。祝你好运：））不幸的是，这打破了我试图保持的悬停行为。现在突出显示的是标准的蓝色背景和白色文本，我希望悬停在上面时颜色保持不变。另外，当你第一次加载它时，它会显示为红色，但在你进入并选择之前，它实际上不会显示为红色。祝你好运：））谢谢，但这似乎不起作用。我得到了一个类似于下面的结果。这是一个改进，但您仍然需要单击并选择一个以使其显示正确的颜色。当你加载它时，它显示为红色，但它仍然显示为绿色。我希望它在所有实例中都显示为正确的颜色？更新了我的答案，用这个哦，太棒了，你已经破解了。非常感谢。我想我只是在前面的例子中留下了这个。谢谢，但这似乎不起作用。我得到了一个类似于下面的结果。这是一个改进，但您仍然需要单击并选择一个以使其显示正确的颜色。当你加载它时，它显示为红色，但它仍然显示为绿色。我希望它在所有实例中都显示为正确的颜色？更新了我的答案，用这个哦，太棒了，你已经破解了。非常感谢。我想我只是在前面的例子中留下了这个。