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

Posted 2023-05-08

【中文标题】在 Javascript/JQuery 中选择单选选项时，是不是可以动态更改下拉列表的颜色或更改列表项的颜色？

【英文标题】：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?在 Javascript/JQuery 中选择单选选项时，是否可以动态更改下拉列表的颜色或更改列表项的颜色？

【发布时间】：2021-06-21 23:34:24

【问题描述】：

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

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

【问题讨论】：

你试过.css("color","blue")吗？ :)

【参考方案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>

【讨论】：

哇，非常感谢！做起来比我想象的要简单，谢谢！ :)

我做到了，对不起，这让我等了一段时间才能接受它作为答案。再次感谢！！