选择选项

后的Javascript/jQuery的变化类选择，所以我有一个选择框，其颜色是灰色的，但选择一个选项后，框的颜色应该变成黑色。我使用下面的代码来完成这个事件选择选项

$('.change_color').on("change",function() { 
 
    $(this).removeClass('grey_color'); 
 
    $(this).addClass('black_color'); 
 
});

.grey_color{ 
 
    color: #999; 
 
} 
 
.black_color{ 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div> 
 
    <select class="change_color grey_color"> 
 
\t <option>12th Standard</option> 
 
\t <option>High School</option> 
 
\t <option>First Year</option> 
 
    </select> 
 
</div>

我似乎无法找出我的错误。

来源

2016-09-22 Anup Gupta

你不是应该在样式选项标签，而不是选择？ – Utkanos

它的工作正常。开始时它在选择后变成灰色，变成黑色。你面临什么问题？ –

你是指背景颜色？ – depperm

似乎按照您的要求工作。

这里是链接到代码：http://codepen.io/anon/pen/rrjGEO

标记：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Select Box</title> 
    <script src="https://code.jquery.com/jquery-3.1.0.js" 
      integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" 
      crossorigin="anonymous"></script> 

    <style> 
     .grey_color { 
      color: #999; 
     } 

     .black_color { 
      color: #000; 
     } 
    </style> 

    <script> 
     $(document).ready(function() { 
      $('.change_color').on("change", function() { 
       $(this).removeClass('grey_color'); 
       $(this).addClass('black_color'); 
      }); 
     }); 

    </script> 
</head> 
<body> 
    <div> 
     <select class="change_color grey_color"> 
      <option>12th Standard</option> 
      <option>High School</option> 
      <option>First Year</option> 
     </select> 
    </div> 
</body> 
</html>

来源

2016-09-22 13:56:10

let opt = document.querySelector(".change_color"); 
 

 
opt.addEventListener("change", function() { 
 
    this.classList.remove("grey_color"); 
 
    this.classList.add("black_color"); 
 
    console.log(1); 
 
});

.grey_color { 
 
    background: #999; 
 
} 
 
.black_color { 
 
    background: #000; 
 
    color: #FFF; 
 
}

<div> 
 
    <select class="change_color grey_color"> 
 
    <option>12th Standard</option> 
 
    <option>High School</option> 
 
    <option>First Year</option> 
 
    </select> 
 
</div>

我觉得是因为你不能改变文本的颜色吗？我真的不知道为什么，但我知道是为了我

来源

2016-09-22 13:48:27

现在我运行我自己的代码片断，它在堆栈溢出上运行良好，但它不能用于我的项目。问题是我想的其他事情。 –

如果您可以请就您的代码进行调查，我认为这会有所帮助？ –

我只需要添加document.ready ..现在它的工作正常。谢谢你的时间。 –

您的代码工作似乎是工作（尽管你可以在片段中失去周围的JavaScript/jQuery代码的script标签）。选择某项时，选择列表的颜色会从灰色变为黑色。

$('.change_color').on("change",function() { 
 
    $(this).removeClass('grey_color'); 
 
    $(this).addClass('black_color'); 
 
});

.grey_color{ 
 
    color: #999; 
 
} 
 
.black_color{ 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <select class="change_color grey_color"> 
 
\t <option>12th Standard</option> 
 
\t <option>High School</option> 
 
\t <option>First Year</option> 
 
    </select> 
 
</div>

你期待的背景色，而不是更改文本颜色的？如果这就是你的意图，你可以改变CSS让它改变background-color属性？请看下图：

$('.change_color').on("change",function() { 
 
    $(this).removeClass('grey_color'); 
 
    $(this).addClass('black_color'); 
 
});

.grey_color{ 
 
    color: #999; 
 
    background-color: none; 
 
} 
 
.black_color{ 
 
    background-color: #000; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <select class="change_color grey_color"> 
 
\t <option>12th Standard</option> 
 
\t <option>High School</option> 
 
\t <option>First Year</option> 
 
    </select> 
 
</div>

来源

2016-09-22 13:48:59

你的代码工作，但你的CSS类设置颜色属性，更改文本颜色。如果你想改变背景颜色，那么你必须使用background-color属性。

.grey_color { 
    background-color: #999; 
} 
.black_color { 
    background-color: #000; 
    color: #fff; 
}

来源

2016-09-22 13:54:35 Nemery

我不得不加$（文件）。就绪在我的剧本，现在它的工作完全正常。

<script> 
 
     $(document).ready(function() { 
 
      $('.change_color').on("change", function() { 
 
       $(this).removeClass('grey_color'); 
 
       $(this).addClass('black_color'); 
 
      }); 
 
     }); 
 

 
    </script>

来源

2016-09-22 14:04:05

回答

相关问题