在 Javascript/JQuery 中選擇單選選項時，是否可以動態更改下拉列表的顏色或更改列表項的顏色？

Question

我的代碼允許我 select 一個單選選項，比如“工作”，並自動讓下拉框 select“工作”作為響應。 但是是否可以進一步 go 和 select 單選選項“工作”，並選擇“工作”下拉菜單並更改為藍色，例如。 綠色代表“雜貨”，紅色代表“雜務”等。甚至 go 比這更進一步，並且后續任務列表項也根據類別進行顏色編碼？

 //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 並添加 class 並刪除其他。

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