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

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');