CODEWITHSUNDEEP
jquerycssdrop-down-menuhtml-select
Michael
Michael

Reputation: 45

Change the background color of an html tag from a dropdown menu with jquery

So i have this select tag

<select id="patient_color_id" name="patient[color_id]">
 <option selected="selected" value="1">blue</option>
 <option value="2">yellow</option>
 <option value="3">green</option>
 <option value="4">red</option>
</select>

The values 0...4 are coming from a db so i cannot change them to the hex color value. Anyway in my jquery file i have

$("#patient_color_id").change(function(){
if($(this).val() == "1"){
    $(".general-info").css('background-color', "#00FFFF");
}
if($(this).val() == "2"){
    $(".general-info").css('background-color', "#F0FFFF");
}
if($(this).val() == "3"){
    $(".general-info").css('background-color', "#0FFFFF");
}
if($(this).val() == "4"){
    $(".general-info").css('background-color', "#FFFFFF");
}
});

So when i am choosing a color from the dropdown menu the background color of the general-info div should change, but nothing happens and i can't figure out what is wrong.

ps. I am using rails but i don't believe that this has something to do with. All the other scripts that i use are working fine.

Upvotes: 2

Views: 1919

Answers (3)

Daniel Jordan
Daniel Jordan

Reputation: 286

I copied your code into jsFiddle and added in the generalInfo div and your code seems to work fine. The only observation I'll make is that some of your color values display as white, perhaps invalid hex values for the color so that could be misleading you. You can check out the jsFiddle here if it helps. I'd recommend wrapping in but that shouldn't really matter since you are bound to a change event.

Here's the jsFiddle http://jsfiddle.net/danieljordan13/G7v9r/

Only thing I changed is the color values to random ones I know work.

$("#patient_color_id").change(function(){
if($(this).val() == "1"){
    $(".general-info").css('background-color', "#ddbbFF");
}
if($(this).val() == "2"){
    $(".general-info").css('background-color', "#aaddFF");
}
if($(this).val() == "3"){
    $(".general-info").css('background-color', "#cceeFF");
}
if($(this).val() == "4"){
    $(".general-info").css('background-color', "#bbbbFF");
}
});

Upvotes: 3

Marc Audet
Marc Audet

Reputation: 46805

Subtle Colors Too Subtle

Actually, the jQuery is fine, the color codes were a bit too subtle perhaps to be seen on some monitors:

Try:

$("#patient_color_id").change(function(){
if($(this).val() == "1"){
    $(".general-info").css('background-color', "#0000FF");
}
if($(this).val() == "2"){
    $(".general-info").css('background-color', "#FFFF00");
}
if($(this).val() == "3"){
    $(".general-info").css('background-color', "#00FF00");
}
if($(this).val() == "4"){
    $(".general-info").css('background-color', "#FF0000");
}
    alert("color: "+$(this).val());
    alert($(".general-info").css('background-color'));
});

Fiddle: http://jsfiddle.net/audetwebdesign/yazhk/

The alerts are for diagnostic purposes only. A red herring, quite common.

Upvotes: 1

Raghu
Raghu

Reputation: 94

AFAIK the code looks correct, you might be the adding the listener before rendering the dom. To check if that is the case you can try and see if the below code works.

If this works try to add listener after the dom rendering is done.

$("#patient_color_id").on("change", function(){
if($(this).val() == "1"){
alert("1");
$(".general-info").css('background-color', "#00FFFF");
}
if($(this).val() == "2"){
alert("2");
$(".general-info").css('background-color', "#F0FFFF");
}
if($(this).val() == "3"){
alert("3");
$(".general-info").css('background-color', "#0FFFFF");
}
if($(this).val() == "4"){
alert("4");
$(".general-info").css('background-color', "#FFFFFF");
}
});

Upvotes: 2

Related Questions