Reverse changes when value is no longer selected (specified IDs)

Question

I have a function that changes the color of a text of one of 12 DIVs on my website.

$('.position_select').change(function(){ 
  var selected = $(this).val();
  var shelf = $("#mockup_shelf_" + selected)
  $(shelf).css({ color: "#FF6633" });
}).change();

It's a mock-up for a user to show on which position they've chosen to display their buttons. It's based on which of the numbers (from 1 to 12) are selected in select tag:

f.select :position, (1..12), {prompt: 'Select Position'}, {required: 'true', class: "position_select" }

I want to change this DIV's text back to black (or all unselected DIVs) if the user unselects this specific position and chooses another. How can I do it? Colors get back to what they should be on page reload, but that's not the point.

Answer 1

Easiest way is to just update all elements to the default color, and then change the color of the element that corresponds to the selected item like this:

$('.position_select').change(function(){ 
  //reset all elements color
  $("[id^=mockup_shelf_]").css({ color: "#000000" });

  //now find and set the color of the selected item
  var selected = $(this).val();
  var shelf = $("#mockup_shelf_" + selected)
  $(shelf).css({ color: "#FF6633" });
}).change();

I'm using the starts with attribute selector since the beginning of every ID is the same.

http://www.w3schools.com/cssref/sel_attr_begin.asp

The [attribute^=value] selector matches every element whose attribute value begins with a specified value.

---

Alternately, you could assign the same class to all mockup_shelf elements and then use this class selector to target them all: $(".mockup_shelf").css({ color: "#000000" });

---

And since good things come in threes, you could also completely eliminate any styling information from the script and create 2 css classes in your stylesheet (allowing you to do more complex styling easier). For example:

.mockup_shelf {
    color: #000000;
}
.mockup_shelf.selected {
    color: #FF6633;
}

All of your mockup_shelf elements would have the mockup_shelf class, and then in script you could add or remove the selected class like so:

$('.position_select').change(function(){ 
  //reset selected element's color
  $(".mockup_shelf.selected").removeClass("selected");

  //now find and set the color of the selected item
  var selected = $(this).val();
  var shelf = $("#mockup_shelf_" + selected)
  $(shelf).addClass("selected");
}).change();

EDIT Since you clarified that you have a multi-select box, I've gone ahead and created a sample fiddle showing how to accomplish this with multiple selections: https://jsfiddle.net/ofhw085r/

  $('.position_select').change(function() {
    //remove class from all shelves to reset them
    $(".mockup_shelf.selected").removeClass("selected");

    var $position_select = $(this); //explicitly labeling this to avoid confusion in the next part
    $position_select.find("option:selected").each(function() {
      var $option = $(this); //'this' now has a new context, so label it to avoid confusing it with 'this' in the outer context
      var shelf = $("#mockup_shelf_" + $option.val());
      shelf.addClass("selected");
    });
  }).change();

Essentially, every time the change event fires on your select , you'll reset the styles on all mockup_shelf elements and then loop through every selected option (using jquery's built-in :selected selector), and then add the selected class to the associated shelf.