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

Question

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 1

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>