Question

所以我有一个选择框，其颜色为灰色，但选择一个选项后，框的颜色应变为黑色。我正在使用以下代码来完成此事件

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我似乎无法弄清楚我的错误。

Answer 1

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>

我认为是因为你无法改变文字的颜色？我真的不知道为什么但是我知道它对我有用

Answer 2

您的代码似乎正在运行（尽管您可能会丢失代码段中JavaScript / jQuery代码周围的script标记。选择某些内容时，选择列表的颜色会从灰色变为黑色。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您是否期望更改背景颜色而不是文字颜色？您可以更改CSS以使其更改background-color属性，如果这是您想要的内容？见下文：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您的代码正常运行，但您有css类设置color属性，这会更改文本颜色。如果要更改背景颜色，则必须使用background-color属性。

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

Answer 4

似乎按照您的要求工作。

以下是代码链接：http://codepen.io/anon/pen/rrjGEO

标记：

01/07/2015 0:00:00

Answer 5

我只需要在我的脚本周围添加$（document）.ready，现在它的工作非常好。

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

选择选项后，Javascript / Jquery更改选择类

5 个答案: