Question

我正在尝试更改两个下拉菜单的背景颜色。在这些下拉菜单中有一个true或false选项。如果选择“ True”，则下拉菜单的背景色应变为绿色。如果为False，则背景为红色。

目前，我已经为两个下拉菜单创建了两个单独的函数，而我正努力寻找一种无需使用相同ID即可将两者结合的方法。

$('#dropdown-a').on('change', function(){
   if ($('#dropdown-a option:selected').text() == "True")
      $('#dropdown-a').css('background-color', '#28a745')
   else if ($('#dropdown-a option:selected').text() == "False")
      $('#dropdown-a').css('background-color', '#dc3545')
   else
      $('#dropdown-a').css('background-color', '#dc3545')
});

$('#dropdown-b').on('change', function(){
   if ($('#dropdown-b option:selected').text() == "True")
      $('#dropdown-b').css('background-color', '#28a745')
   else if ($('#dropdown-a option:selected').text() == "False")
      $('#dropdown-b').css('background-color', '#dc3545')
   else
      $('#dropdown-b').css('background-color', '#dc3545')
});

 select option[value="True"] {
   background-color: #28a745;
 }

 select option[value="False"] {
   background-color: #dc3545;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form control form-control-sm" id="dropdown-a">
  <option selected disabled value="">True/False</option>
  <option value="True">True</option>
  <option value="False">False</option>
</select>

<select class="form control form-control-sm" id="dropdown-b">
  <option selected disabled value="">True/False</option>
  <option value="True">True</option>
  <option value="False">False</option>
</select>

Answer 1

尝试一下：

const makeDropDown = function(ddSelector){
    $(ddSelector).on('change', function(){
       if ($(ddSelector +' option:selected').text() == "True")
          $(ddSelector).css('background-color', '#28a745')
       else if ($(ddSelector + ' option:selected').text() == "False")
          $(ddSelector).css('background-color', '#dc3545')
       else
          $(ddSelector).css('background-color', '#dc3545')
    });
};
makeDropDown('#dropdown-a');
makeDropDown('#dropdown-b');

Answer 2

仅使用类而不是ID：

$('.dropdown').on('change', function(){
   if ($(this).find('option:selected').text() == "True")
      $(this).css('background-color', '#28a745')
   else if ($(this).find('option:selected').text() == "False")
      $(this).css('background-color', '#dc3545')
   else
      $(this).css('background-color', '#dc3545')
});

 select option[value="True"] {
   background-color: #28a745;
 }

 select option[value="False"] {
   background-color: #dc3545;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form control form-control-sm dropdown" id="dropdown-a">
  <option selected disabled value="">True/False</option>
  <option value="True">True</option>
  <option value="False">False</option>
</select>

<select class="form control form-control-sm dropdown" id="dropdown-b">
  <option selected disabled value="">True/False</option>
  <option value="True">True</option>
  <option value="False">False</option>
</select>

简化两个jQuery函数以更改两个单独的下拉菜单的背景

2 个答案: