javascript - 我有很多选择相同的类，如何改变颜色？

Question

我有很多选择相同的类，如何更改选择的颜色？

如果 selected option = first 那么background-colorselect 应该是red，如果 selected option = second then green。

<select class="select">
   <option value="first" selected>first</option>
   <option value="second">second</option>
</select>

<select class="select">
   <option value="first">first</option>
   <option value="second" selected>second</option>
</select>

标签： javascriptjqueryhtmlcss

Answer 1

我有很多选择相同的课程

您可以使用这个公共类附加一个更改事件，然后使用this关键字来知道哪个选择被更改，例如：

$('.select').on('change', function() {
  var selected_value = $(this).val();
  var color = "";

  if (selected_value === 'first') {
    color = 'red';
  } else if (selected_value === 'second') {
    color = 'green';
  }

  $(this).css('background-color', color);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
  <option value=""></option>
  <option value="first">first</option>
  <option value="second">second</option>
</select>

<select class="select">
  <option value=""></option>
  <option value="first">first</option>
  <option value="second">second</option>
</select>