如何動態修改jQuery多重選擇下拉菜單的背景色？

Question

我有多個選擇下拉菜單，我試圖將它們的背景色分別顯示為“已確認”或“未確認”的紅色或綠色1）頁面加載時，取決於選擇的選項，以及2）更新每個選擇框的背景色在變化。

當前在頁面加載時，兩個選擇框都顯示綠色確認的背景顏色，就好像它正在評估第一個，而不是評估第二個“未確認”下拉菜單來添加紅色背景顏色-我嘗試將其包裝在似乎不適合的each（）中工作。

如何獲得第二個“選擇”以在負載和更改時應用正確的背景顏色？ 我下面的代碼不正確嗎？

謝謝！

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

演示（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');
    }
});