jQuery: Change select background with content change

Question

I have the following select:

<select class="state">
    <option value="1">Done</option>
    <option value="2">Closed</option>
    <option value="2">Open</option>
    <option value="2">Working on it</option>
    <option value="2">Waiting</option>
</select>

The following script is changing the color depending of its content:

$('.state option:selected').each(function(){
    var state = $(this).text();
    if(state == 'Open') {
        $(this).parent().parent().css('background-color', '#e74c3c');
    } else if(state == 'Working on it') {
        $(this).parent().parent().css('background-color', '#f1c40f');
    } else if(state == 'Closed') {
        $(this).parent().parent().css('background-color', '#c0392b');
    } else if(state == 'Waiting') {
        $(this).parent().parent().css('background-color', '#d35400');
    } else if(state == 'Done') {
        $(this).parent().parent().css('background-color', '#27ae60');
    } else {
        $(this).parent().parent().css('background-color', '#bdc3c7');
    }
});
$('select').change(
    function (){
        var color = $('option:selected',this).css('background-color');
        $(this).css('background-color',color);
    }
).change();

But what this script is not doing: It is not changing the color if I change the value of the select. Additionally I am sure, that this code could be much shorter.

The select has a class because this select will appear more than once on a single page.

Possible duplicate of [How to change select box option background color?](https://stackoverflow.com/questions/12836227/how-to-change-select-box-option-background-color) — Anoop Mayampilly Muraleedharan, Jul 28 '17 at 11:20

score 0 · Answer 1 · answered Jul 28 '17 at 11:25

0

you are not checking the state correctly. you should have:

var state = $('.state option:selected').text()

answered Jul 28 '17 at 11:25

skend

51
1
9

score 0 · Accepted Answer · answered Jul 28 '17 at 11:28

Use addClass and removeClass
Use data-* to set the class to add
Set the style in the class
Remove all class before adding the class of the selected option

$('.state').change(function() {
$(this).parent().parent().removeClass("default done closed open working waiting");
  var state = $("option:selected", this).attr("data-class");
  $(this).parent().parent().addClass(state);

}).change();

.done {
  background-color: #27ae60;
}

.closed {
  background-color: #c0392b;
}

.open {
  background-color: #e74c3c;
}

.working {
  background-color: #f1c40f;
}

.waiting {
  background-color: #d35400;
}

.default {
  background-color: #bdc3c7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div>
    <select class="state">
    <option value="1" data-class="done">Done</option>
    <option value="2" data-class="closed">Closed</option>
    <option value="2" data-class="open">Open</option>
    <option value="2" data-class="working">Working on it</option>
    <option value="2" data-class="waiting">Waiting</option>
</select>
  </div>
</div>

@PhilHarmonie glad to help mate happy coding – guradio Jul 28 '17 at 13:54 — guradio, Jul 28 '17 at 13:54

jQuery: Change select background with content change

2 Answers2