Question

我有多个选择下拉列表，其背景颜色我试图显示为红色或绿色表示“已确认”或“未确认”两者1）在页面加载时根据选择的选项，以及2）更新背景颜色每个选择框都在变化。

目前在页面加载时，两个选择框都显示绿色确认的背景颜色，就好像它正在评估第一个而不是评估第二个“未确认”选定的下拉列表以添加红色背景颜色 - 我尝试将其包装在每个（）中似乎工作。

如何获得第二个选择以在加载和更改时应用正确的背景颜色？我的代码下面是不正确的吗？

谢谢！

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

Answer 2

将您的jquery代码更新为：

$(function(){
   $('.rez').each(function(){
        if($(this).val() == 'Confirmed'){
            $(this).css('background-color', 'green');
        }

        if($(this).val() == 'Not Confirmed'){
            $(this).css('background-color', 'red');
        }
    });             

    $('.rez').change(function() {
        if ($(this).val() == 'Confirmed') {
            $(this).css('background-color', 'green');
        }
        if ( $(this).val() == 'Not Confirmed') {
            $(this).css('background-color', 'red');
        }
    });
});

Answer 3

您需要修复一些位，例如在.each()循环和click事件处理程序中使用错误的选择器。

此外，您的代码可以恢复为：

＆＃13;

$(function () {
    // A single function to toggle the background color.
    function toggleBackground() {
        $('.rez').each(function (ix, el) {
            // Toggle the color based on the selected value.
            $(this).css('background-color', $(this).val() == 'Confirmed' ? 'green' : 'red');
        });
    }
    
    // Work out the initial background color.
    toggleBackground();
    
    // If any select changes, toggle its background color.
    $('.rez').on('change', toggleBackground);
});

＆＃13;

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

＆＃13;

Demo (jsFiddle)

Answer 4

您应该将.rez的引用更改为$（this）。这样做将确保它检查.rez的每个实例，而不是检查页面上的第一个实例，这就是您的代码现在失败的原因。

代码应该像这样结束

$('.rez').each(function(){
   if($(this).val() == 'Confirmed'){
        $(this).css('background-color', 'green');
   }
   else
   {
        $(this).css('background-color', 'red');
   }
});             


$('.rez').change(function() {
    if ($(this).val() == 'Confirmed') {
         $(this).css('background-color', 'green');
    }
    else
    {
         $(this).css('background-color', 'red');
    }
});

如何动态修改jQuery多选下拉背景颜色？

4 个答案: