Javascript 如何在选项标记中使用多种颜色为文本着色

我有一个下拉列表，其中显示了两个值。我喜欢第二个值有另一种文本颜色（浅灰色）。 我一直在寻找如何做到这一点，显然您需要使用Java脚本来实现这一点。不幸的是，我对Java脚本不是很在行，到目前为止，我尝试的所有东西都不起作用

<select name="cities">
    <option value="1">London (England)</option>
    <option value="2">Sidney (Australia)</option>
    <option value="3">Amsterdam (Netherlands)</option>
</select>

伦敦（英国）
西德尼（澳大利亚）
阿姆斯特丹（荷兰）

我试过这样的方法：

<option value="1">
    <span style="text-decoration:line-through">London</span>
    <span style="color:green;font-weight:bold">(England)</span>
</option>

伦敦
（英国）

及

document.getElementById（'country'）.style.color='#FF0000'；
伦敦（英国）

虽然它在中工作，但在我的网站上却不起作用

另一个接近的选择是

有人知道一点简单的java脚本代码来实现这一点吗？

---

谢谢

您可以尝试使用CSS。像这样

select option:nth-child(even) {
    color: green;
}

select option:nth-child(odd) {
    color: "#000";
}

或者只是更改第二个选项的颜色

select option:nth-child(2) {
   color: green;
}

检查此项（这需要投入大量工作）

您可以创建一个自定义下拉控件，如图所示，但是有很多事情需要记住，并且需要处理，例如在单击下拉控件之外的任何位置时隐藏下拉控件

只是粘贴HTML供您参考

<div class="selected">London (England)</div>
<div class="dropdown">
    <div id="1" class="outer"><div class="first">London</div><div class="second"> (England)</div></div>
    <div id="2" class="outer"><div class="first">Sidney</div><div class="second"> (Australia)</div></div>
    <div id="3" class="outer"><div class="first">Amsterdam</div><div class="second"> (Netherlands)</div></div>
</div>

伦敦（英国）
伦敦（英国）
西德尼（澳大利亚）
阿姆斯特丹（荷兰）

这个问题几乎与这个问题相同，但一直没有完全回答。虽然

选项

支持一些样式，但为了应用生动的样式，为什么不编写自己的html和脚本来生成自定义选择框？不幸的是，还没有给出一个好的答案。有人能帮忙吗？颜色属性很好。其他样式如粗体怎么样？@Moogs尝试不同的颜色，如绿色/灰色。谢谢您花时间回答。然而，我正在寻找的解决方案在同一条线上有两种不同的颜色。在我的例子中，用两种不同的颜色（黑色和浅灰色）显示城市和国家。

<div class="selected">London (England)</div>
<div class="dropdown">
    <div id="1" class="outer"><div class="first">London</div><div class="second"> (England)</div></div>
    <div id="2" class="outer"><div class="first">Sidney</div><div class="second"> (Australia)</div></div>
    <div id="3" class="outer"><div class="first">Amsterdam</div><div class="second"> (Netherlands)</div></div>
</div>