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

时间:2018-12-03 11:17:09

标签: javascript jquery html css

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

如果选择的选项=首先,则选择的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>

1 个答案:

答案 0 :(得分:0)

  

我有很多选择相同的课程

您可以使用此公共类附加更改事件,然后使用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>