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

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事件处理程序中的错误选择。

此外，您的代码可以恢复到这一点：

$(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); 
 
});

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

Demo (jsFiddle)

Answer 4

您应该更改为$（这个）你.rez的引用。这样做将确保它检查.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'); 
    } 
});