如何解决在 Javascript/JQuery 中选择单选选项时,是否可以动态更改下拉列表的颜色或更改列表项的颜色?
我有代码可以让我选择一个单选选项,比如“工作”,并让下拉框自动选择“工作”作为响应。但是,是否可以更进一步并选择单选选项“工作”,然后选择“工作”下拉列表并更改为蓝色,例如。绿色代表“杂货”,红色代表“家务”等等。也许甚至更进一步,让后续的任务列表项也根据类别进行颜色编码?
//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>
解决方法
是的可能:) 我为每个选择添加一个 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。