jQuery add css class depending on selectbox option

Question

I have 3 dropdown where I want to add a class to a specific div depending on the value of the dropdown.

<select name="item1">
    <option>Blue</option>
    <option>Green</option>
    <option>Red</option>
</select>

<select name="item2">
    <option>Blue</option>
    <option>Green</option>
    <option>Red</option>
</select>

<select name="item3">
    <option>Blue</option>
    <option>Green</option>
    <option>Red</option>
</select>

<div class="product">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>

I'm trying to add a css class depending on the value of a dropdown. For example, if the option blue from the dropdown item1 is selected, I would like to add a class .blue to the div item1.

I used to have checkboxes instead of the dropdown and I had this code:

$(document).ready(function($){
    $('input#red').change(function(){
        if($(this).is(":checked")) {
            $('div.item1').addClass("red");
        } else {
            $('div.item1').removeClass("red");
        }
    });
    $('input#blue').change(function(){
        if($(this).is(":checked")) {
            $('div.item1').addClass("blue");
        } else {
            $('div.item1').removeClass("blue");
        }
    });
});

I created this: http://jsfiddle.net/uJcB7/14/ How does should be done correctly?

------------EDIT-----------

I am using gravity forms to generate the select box, and they are adding "|0" after the name of the option (I don't know why!).

For example "green|0" instead of "green". The "|0" is hidden in the field but the class generated is "green|0".

Any thought on how to remove that "|0" on the css class?

Also they generate a name for the selectbox, is it possible to use a class instead of using the name element?

Have a look on the updated code:

http://jsfiddle.net/uJcB7/24/

Answer 1

The class of the <div> to add the class to is the same as the name property of the <select> element being changed, and the name of the class to add is the lower case version of the value of the option selected. With that in mind, this works:

$(document).ready(function($){
    $('select').change(function(){
        $('.' + this.name).attr('class', this.name + ' ' + this.value.toLowerCase());
    });
});

jsFiddle DEMO

Answer 2

Here's a general function that will add the text value of the selected option to the appropriate div:

$(document).ready(function($){

  $('select').change(function(){
    var s = $(this);
    var name = s.attr('name');
     $('.'+name).removeClass().addClass(name+' '+s.find(':selected').text().toLowerCase());
  });
});​

Demo: http://jsfiddle.net/jackwanders/xcEa9/4/

Even more generally, you can use $.map to obtain a list of the select menu's values so that you know which class names to remove on each change event:

$('select').change(function(){
    var $this = $(this);
    var values = $.map($this.find('option'),function(opt){ return opt.value.toLowerCase(); }).join(' ');
    $('.'+this.name).removeClass(values).addClass($(this).val().toLowerCase());
});

Demo: http://jsfiddle.net/jackwanders/xcEa9/5/

Answer 3

$(document).ready(function() {

  $('#item1').change(function() {
    $('.item1').addClass($('#item1').val());
  });

  $('#item2').change(function() {
    $('.item2').addClass($('#item2').val());
  });

  $('#item3').change(function() {
    $('.item3').addClass($('#item3').val());
  });

});

You can also keep the individual segments within for loop if you like.

Answer 4

$(function() {
  $('select').bind('change', function() {
    var $this = $(this);
    $this.find('option:not(:selected)').each(function(index, option) {
      $this.removeClass($(option).text());
    });
    $this.addClass($this.find('option:selected').text());
  });        
});

Updated JSFiddle

Answer 5

This clears the previously set color value in the class (if any) and sets the new one.

$(document).ready(function($){
    $('select').change(function(){
        name = $(this).attr('name');
        curClass = $('div.'+name).attr('class');
        $('div.'+name).removeClass(curClass).addClass(name + ' ' +$(this).val());
    });
});

​ Fiddle Here

Answer 6

This one will work for all your select elements.

jsFiddle demo

$('select[name^=item]').change(function(){
    var val = $(this).val();
    $('div.'+$(this).attr('name')).removeClass('red blue green').addClass(val);
});

select[name^=item] Searches for a select element which name starts with item