javascript - 如何动态修改 jQuery 多选下拉菜单的背景颜色？

Question

我有多个选择下拉菜单，我试图将其背景颜色显示为红色或绿色以表示“已确认”或“未确认”两者 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');
            }
        });
});

Answer 1

我想你正在寻找这个:

$('.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。