我有多个选择下拉菜单,我试图将其背景颜色显示为红色或绿色以表示“已确认”或“未确认”两者 1) 在页面加载时取决于选择的选项,以及 2) 更新背景颜色每个选择框都会发生变化。
目前在页面加载时,两个选择框都显示绿色确认背景颜色,就好像它正在评估第一个而不是评估第二个“未确认”选择的下拉列表以添加红色背景颜色 - 我尝试将其包装在每个()中但没有'似乎不起作用。
如何让第二个 Select 在加载和更改时应用正确的背景颜色?我下面的代码不正确吗?
谢谢!
<select class="rez">
<option value="Not Confirmed">Not Confirmed</option>
<option value="Confirmed" selected="selected">Confirmed</option>
</select>
<select class="rez">
<option value="Not Confirmed" selected="selected">Not Confirmed</option>
<option value="Confirmed">Confirmed</option>
</select>
$(function(){
$('.rez').each(function(){
if($('.rez option:selected').val() == 'Confirmed'){
$('.rez').css('background-color', 'green');
}
if($('.rez option:selected').val() == 'Not Confirmed'){
$('.rez').css('background-color', 'red');
}
});
$('.rez').change(function() {
if ( $('.rez option:selected').text() == 'Confirmed') {
$('.rez').css('background-color', 'green');
}
if ( $('.rez option:selected').text() == 'Not Confirmed') {
$('.rez').css('background-color', 'red');
}
});
});
最佳答案
我想你正在寻找这个:
$('.rez').each(function () {
if ($('.rez option:selected').val() == 'Confirmed') {
$('.rez').css('background-color', 'green');
}
if ($('.rez option:selected').val() == 'Not Confirmed') {
$('.rez').css('background-color', 'red');
}
});
$('.rez').change(function () {
if ($(':selected', this).text() == 'Confirmed') {
$(this).css('background-color', 'green');
}
if ($(':selected', this).text() == 'Not Confirmed') {
$(this).css('background-color', 'red');
}
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="rez">
<option value="Not Confirmed">Not Confirmed</option>
<option value="Confirmed" selected="selected">Confirmed</option>
</select>
<select class="rez">
<option value="Not Confirmed" selected="selected">Not Confirmed</option>
<option value="Confirmed">Confirmed</option>
</select>
您不需要在函数中使用选择器。相反,您可以使用 this
。
关于javascript - 如何动态修改 jQuery 多选下拉菜单的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26150636/