CODEWITHSUNDEEP
javascriptjqueryforms
Jibes
Jibes

Reputation: 955

How can I modify a jQuery multiple select dropdown background color dynamically?

I have multiple select dropdowns whose background color I'm trying to show as red or green for 'confirmed' or 'not confirmed' both 1) On page load depending which option is selected, and 2) Update the background color of each select box on change.

Currently on page load both select boxes show green confirmed background color as if it's evaluating the 1st and not evaluating the 2nd 'not confirmed' selected dropdown to add the red background color - I tried wrapping this within each() which didn't seem to work.

How can I get the second Select to apply the correct background color on load and on change? Is my code below incorrect?

Thanks!

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

Upvotes: 1

Views: 2748

Answers (4)

emerson.marini
emerson.marini

Reputation: 9348

You need to fix some bits, like using the wrong selectors within both the .each() loop and the click event handler.

Also, your code could be resumed to this:

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

Upvotes: 0

Jayden
Jayden

Reputation: 1

You should change your references of .rez to $(this). Doing so will make sure that it checks each instance of .rez rather than checking the first instance on the page which is why your code is failing now.

The code should end up like this

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

Upvotes: 0

Tyr
Tyr

Reputation: 2810

Update your jquery code to this:

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

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

I think you are looking for this:

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

You don't need use selector in the function. Instead you can use this.

Upvotes: 2

Related Questions