更改html选择输入中选定选项的颜色

我试图更改选择菜单中所选选项的文本颜色，但似乎无法使其正常工作。下面是我的代码。有什么想法吗？我只想在选择了具有值的选项后更改颜色。。。i、 e.除了第一种选择以外的任何选择

html:

---

通过一点jQuery，当有人更改菜单项时，您可以让它更改颜色

jQuery

---

通过一点jQuery，当有人更改菜单项时，您可以让它更改颜色

jQuery

从第一个选项中删除属性值=：

PS：我冒昧地更改了您的选择器。而不是：未选中，使用常规样式，仅在选中的样式上更改颜色…

从第一个选项中删除属性值=：

---

PS：我冒昧地更改了您的选择器。而不是：not:checked，使用常规样式，并仅在选中的样式上更改颜色…

请选中此项，您需要使用jQuery以准确实现您尝试执行的操作：

jQuery：

---

使用此jQuery，如果选择了第一个选项，即选择Phone Type-，则其颜色将保持黑色，但如果选择任何其他选项，其颜色将更改为01afd2。

请检查此项，您将需要使用jQuery以准确实现您的目标：

jQuery：

---

使用此jQuery，如果选择了第一个选项，即选择Phone Type-，则其颜色将保持黑色，但如果选择任何其他选项，其颜色将更改为01afd2。

我认为OP不是指更改背景色。这非常有效！谢谢有时，在php中，select会加载已选择的选项。在本例中，它不起作用，因为jQuery引用没有变化。如果已经通过php脚本选择了值为的第一个选项之外的其他选项，您知道如何让它加载蓝色吗@布莱恩·本内特，像这样的？但是如果$select.val！={$this.css'color'，'red'}一个更简单的解决方案可能是将默认值设置为禁用，这样它们就不能切换回去……或者这不是一个选项吗？这里有一个更新：@paigerosefigueira，不知道为什么代码不适合你。这里是另一个与你的解决方案对照加载的ID@PaigeRoseFigueiraI的工作小提琴我不认为OP是指改变背景颜色。这是伟大的作品！谢谢有时，在php中，select会加载已选择的选项。在本例中，它不起作用，因为jQuery引用没有变化。如果已经通过php脚本选择了值为的第一个选项之外的其他选项，您知道如何让它加载蓝色吗@布莱恩·本内特，像这样的？但是如果$select.val！={$this.css'color'，'red'}一个更简单的解决方案可能是将默认值设置为禁用，这样它们就不能切换回去……或者这不是一个选项吗？这里有一个更新：@paigerosefigueira，不知道为什么代码不适合你。下面是另一个正在使用的解决方案，它将根据加载的ID@PaigeRoseFigueira检查您的解决方案

<div class="row1-3home">
  <select  name="phone1" id="phone1">
        <option value="">-- Select Phone Type --</option>
        <option value="Mobile">Mobile</option>
        <option value="Office">Office</option>
        <option value="Home">Home</option>
    </select>

   <select  name="phone2" id="phone2">
        <option value="">-- Select Phone Type --</option>
        <option value="Mobile">Mobile</option>
        <option value="Office">Office</option>
        <option value="Home">Home</option>
  </select>  


</div>  

.row1-3 select, .row1-3home select {
background:#FFF;
font-size:12px;
font-family:'Open Sans', sans-serif;
width:94%;
margin-left:3%;
margin-right:3%;
height:40px;
line-height:40px;
border:none;
padding-left:10px;
border-radius:none;
margin-bottom:5px;
-moz-appearance: none;
}
.row1-3 select option, .row1-3home select option {
color:#01afd2;
}
.row1-3 select option:not(:checked), .row1-3home select option:not(:checked) {
color:#9fa7b4;
}

$("select").change(function() {
    $(this).css('color','red')
})

<select  name="phone1" id="phone1">
      <option>-- Select Phone Type --</option>
      <option value="Mobile">Mobile</option>

.row1-3 select option[value]:checked, .row1-3home select option[value]:checked {
    color:#01afd2;
}

jQuery('#phone1').change(function () {
    if (jQuery(this).children('option:first-child').is(':selected')) {
        jQuery("#phone1").css("color", "black");
        jQuery("#phone1 option:checked").css("color", "black");
        jQuery("#phone1 option:not(:checked)").css("color", "black");
    } else {
        jQuery("#phone1").css("color", "#01afd2");
        jQuery("#phone1 option:checked").css("color", "#01afd2");
        jQuery("#phone1 option:not(:checked)").css("color", "black");
    }
});

jQuery('#phone2').change(function () {
    if (jQuery(this).children('option:first-child').is(':selected')) {
        jQuery("#phone2").css("color", "black");
        jQuery("#phone2 option:checked").css("color", "black");
        jQuery("#phone2 option:not(:checked)").css("color", "black");
    } else {
        jQuery("#phone2").css("color", "#01afd2");
        jQuery("#phone2 option:checked").css("color", "#01afd2");
        jQuery("#phone2 option:not(:checked)").css("color", "black");
    }
});