Как изменить динамический цвет выпадающего меню jQuery несколько раз?

Question

У меня есть несколько выпадающих меню, чей цвет фона я пытаюсь показать как красный, так и зеленый для «подтвержденного» или «не подтвержденного»: 1) на загрузке страницы, в зависимости от выбранной опции, и 2) обновить цвет фона каждого выберите поле при изменении.

В настоящее время на странице загружать оба окна выбора показывают зеленый цвет подтвержденного фона, как если бы он оценивал 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() цикла и обработчик события щелчка.

Кроме того, ваш код может быть возобновлено к этому:

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