Question

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

如果选择的选项=首先，则选择的background-color应该是red；如果选择的选项=第二，则应该是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>

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>

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

1 个答案: