Change select css on change value

Question

I am trying to change the background-color depending on the value that is returned by the selected value. I have the following code but I am not getting anywhere:

<script>
$(document).ready(function() {
    $('#assessments').change(function(){
        if ($(this).val() == "0") {
            $('select').css('background-color', '#FF0000');
        } else if ($(this).val() == "1") {
            $('select').css('background-color', '#00FF00');
        } else if ($(this).val() == "2") {
            $('select').css('background-color', '#0000FF');
        }
    });
});
</script>

<select id='assessments'>
    <option value='0'>NYC</option>
    <option value='1'>C</option>
    <option value='2'>G</option>
</select>

EDIT: Alrighty besides the DOM ready handler not being there (which I have now added on) the select background-color is still not changing. Am I fetching the value wrong from the select box? Is there a way to output the value so I can check that it is indeed getting the right value or any value at all.

@isherwood I have included the jQuery library in my project. — TheShinyTuxedo
– TheShinyTuxedo, Commented Mar 11, 2014 at 1:21
is it necessary to use jQuery... CSS solution could be much simpler — Jatin
– Jatin, Commented Mar 11, 2014 at 1:22
Feel free to put a CSS solution together. I'm not sure how that's possible. — isherwood
– isherwood, Commented Mar 11, 2014 at 1:43

adeneo · Accepted Answer · 2014-03-11 01:20:47Z

5

You'll need a DOM ready handler with that, as the script appears before the elements in the DOM.
Also, you'll have to include jQuery to use jQuery methods.

<script>
$(function() {

    $('#assessments').change(function(){
        if ($(this).val() == "0") {
            $('select').css('background-color', '#FF0000');
        } else if ($(this).val() == "1") {
            $('select').css('background-color', '#00FF00');
        } else if ($(this).val() == "2") {
            $('select').css('background-color', '#0000FF');
        }
    });

});

</script>

<select id='assessments'>
    <option value='0' selected>NYC</option>
    <option value='1'>C</option>
    <option value='2'>G</option>
</select>

Another option would be to move the script to below the elements in the DOM

answered Mar 11, 2014 at 1:20

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

isherwood Over a year ago

Yup. Can't act on elements that don't exist yet.

Barmar Over a year ago

Why do so many programmers forget this? Isn't it the first thing mentioned in every jQuery tutorial?

adeneo Over a year ago

@Barmar - Yes, it's the first thing in every book, and on the jQuery site, but many just copy examples from Stack Overflow where we tend to not include the DOM ready handler in most cases, and they see it working on jsFiddle where it's automatically included, and they of course didn't bother reading the manual, so they have to ask.

Matúš Dúbrava Over a year ago

Apart from this thing being mentioned in every jQuery tutorial, it is also mentioned in every third question with jquery tag here. Or better to say, this is solution to every third question. Just sad.

TheShinyTuxedo Over a year ago

There must be something else that I am doing wrong because I have added the ready handler but the background-color is not updating still. Any thoughts?

|

Collectives™ on Stack Overflow

Change select css on change value

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related