Is it possible to dynamically change the color of a dropdown or change list item color when a radio option is selected in Javascript/JQuery?

I have code that allows me to select a radio option, say, ‘Work’, and have the dropdown box automatically select ‘Work’ in response. But is it possible to go further and to select the radio option ‘Work’, and have the ‘Work’ dropdown be selected and also change to blue, for instance. And green for ‘Grocery’, red for ‘Chores’, etc. Maybe even go further than that and have the subsequent task list items also color-coded based on Category?

//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

Yes is possible 🙂 I add an if for every choise and add class and remove other.

//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>