在 Javascript/JQuery 中选择单选选项时，是否可以动态更改下拉列表的颜色或更改列表项的颜色？

Question

我的代码允许我选择一个单选选项，例如“工作”，并让下拉框自动选择“工作”作为响应。但是是否可以更进一步并选择单选选项“工作”，并选择“工作”下拉菜单并更改为蓝色，例如。绿色代表“杂货”，红色代表“杂务”等。甚至可能比这更进一步，并且后续任务列表项也根据类别进行颜色编码？

//task entry interface is dynamically changed based on type of task entered
//dynamic list 
$(document).ready(function ($) {
    $(document).on('change', 'input[name="category"]', function () {
        var lookup_val = $(this).val();

        $("#mySelect option").filter(function () {
            return $(this).val() === lookup_val;
        }).first().prop('selected', true).siblings().prop('selected', false);

        $("select[name='mySelect']").trigger({ type:'change', originalEvent:'custom' });

    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-wrap" contenteditable="false"> 
    <div class="list-inner-wrap">
      <h2 class="title">ToDo List</h2>
      <h3 class="title">Add Task</h2>
      <!--<h4>Task Name</h4>-->

      <form method="POST" action="..." name="radiodemo" id="radiodemo" onsubmit="getCategory();">
        <label for="category"> Category:</label>

        <input type="radio" id="grocery" name="category" value="Grocery" class="category" checked="checked">
        <label for="grocery">Grocery</label>
        <input type="radio" id="work" name="category" value="Work" class="category">
        <label for="work">Work</label>
        <input type="radio" id="chores" name="category" value="Chores" class="category">
        <label for="chores">Chores</label>
        <input type="radio" id="finance" name="category" value="Finance" class="category">
        <label for="finance">Finance</label>
      <br>

<!--dynamic radio option -->

        Select your category:
        <select id="mySelect">
        <option value="Groceries">Groceries</option>
        <option value="Work">Work</option>
        <option value="Chores">Chores</option>
        <option value="Finance">Finance</option>
            </select>
        <br><br>
 
        </form>
    
    <p id="demo"></p>

Answer 1

是的是可能的:) 我为每个选择添加一个 if 并添加类并删除其他类。

//task entry interface is dynamically changed based on type of task entered
//dynamic list 
$(document).ready(function ($) {
    $(document).on('change', 'input[name="category"]', function () {
        var lookup_val = $(this).val();

        $("#mySelect option").filter(function () {
            return $(this).val() === lookup_val;
        }).first().prop('selected', true).siblings().prop('selected', false);
        $("select[name='mySelect']").trigger({ type:'change', originalEvent:'custom' });
        $( "#mySelect" ).removeClass();
        if(lookup_val === 'Groceries'){
           $( "#mySelect" ).addClass( "red" );
        }else if(lookup_val === 'Work'){
          $( "#mySelect" ).addClass( "blue" );
        }else if(lookup_val === 'Chores'){
          $( "#mySelect" ).addClass( "green" );
        }else if(lookup_val === 'Finance'){
          $( "#mySelect" ).addClass( "yellow" );
        }

    });
});

.red{
  background-color:red;
  color:white;
}
.blue{
  background-color:blue;
  color:white;
}
.green{
  background-color:green;
  color:white;
}
.yellow{
  background-color:yellow;
  color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-wrap" contenteditable="false"> 
    <div class="list-inner-wrap">
      <h2 class="title">ToDo List</h2>
      <h3 class="title">Add Task</h2>
      <!--<h4>Task Name</h4>-->

      <form method="POST" action="..." name="radiodemo" id="radiodemo" onsubmit="getCategory();">
        <label for="category"> Category:</label>

        <input type="radio" id="grocery" name="category" value="Grocery" class="category" checked="checked">
        <label for="grocery">Grocery</label>
        <input type="radio" id="work" name="category" value="Work" class="category">
        <label for="work">Work</label>
        <input type="radio" id="chores" name="category" value="Chores" class="category">
        <label for="chores">Chores</label>
        <input type="radio" id="finance" name="category" value="Finance" class="category">
        <label for="finance">Finance</label>
      <br>

<!--dynamic radio option -->

        Select your category:
        <select id="mySelect" class='red'>
        <option value="Groceries">Groceries</option>
        <option value="Work">Work</option>
        <option value="Chores">Chores</option>
        <option value="Finance">Finance</option>
            </select>
        <br><br>
 
        </form>
    
    <p id="demo"></p>