【JavaScript】那些年菜鸟开发遇到的那些事

最新推荐文章于 2024-07-19 14:30:40 发布

a box of Sweets

最新推荐文章于 2024-07-19 14:30:40 发布

阅读量110

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_41216195/article/details/116045086

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用JavaScript和CSS实现HTML select元素中option选中和未选中状态的颜色差异。通过设置不同的颜色变量，当select选择项改变时动态更新select的颜色。示例代码展示了在选中状态下option变为黑色，未选中状态下变为灰色的效果。

摘要由CSDN通过智能技术生成

1、select中未选择的option是灰色，选中之后变成黑色

//请选择上传文件的样式：“请选择价格类型”等提示语要变成灰色

var unSelected = "#ccc";

var selected = "#333";

$(function () {

    $("select").css("color", unSelected);

    $("option").css("color", selected);

    $("select").change(function () {

      var selItem = $(this).val();

      if (selItem == $(this).find('option:first').val()) {

        $(this).css("color", unSelected);

      } else {

        $(this).css("color", selected);

      }

    });

  })

</script>

效果：