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/

Anthony Grist · Accepted Answer · 2012-06-26 14:12:47Z

2

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

edited Jun 26, 2012 at 14:12

answered Jun 26, 2012 at 13:17

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

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

9 Comments

chipcullen Over a year ago

Short and sweet. Nice! I would only warn the OP that this will act on any select element, so they may need to filter it in some way, like Roko suggested.

jackwanders Over a year ago

It also hardcodes the class names to remove, so OP will need to remember to update this function if the values of the select menus change

Anthony Grist Over a year ago

@jackwanders I couldn't decide on the best method to handle that, but have now. I've edited the code so that, rather than adding/removing specific classes, it simply overwrites the class attribute with the required new classes - that will be itemX and red/blue/green.

jackwanders Over a year ago

that's what i had in my first solution; basically resetting the class. However, if the div looks like <div class="item 1 rounded-corners">, then you lose the rounded-corners class. that's why I settled on using $.map to get all option values

Anthony Grist Over a year ago

@jackwanders Assuming the HTML in use actually looks like the HTML in the question, that wouldn't be an issue in this specific case. In general, however, you're correct; $.map() would be the more generic solution.

|

jackwanders · Accepted Answer · 2012-06-26 13:33:17Z

1

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/

edited Jun 26, 2012 at 13:33

answered Jun 26, 2012 at 13:17

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

1 Comment

Anthony Grist Over a year ago

That's an unnecessary amount of jQuery to access properties that are readily available via this (the <select> element that triggered the event).

user1321375 · Accepted Answer · 2012-06-26 13:17:57Z

0

$(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.

answered Jun 26, 2012 at 13:17

user1321375

11 bronze badge

Comments

amiuhle · Accepted Answer · 2012-06-26 13:38:03Z

0

$(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

answered Jun 26, 2012 at 13:38

amiuhle

2,8431 gold badge22 silver badges30 bronze badges

Comments

SuperMykEl · Accepted Answer · 2012-06-26 14:03:33Z

0

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

answered Jun 26, 2012 at 14:03

SuperMykEl

6233 silver badges15 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 26, 2012 at 13:20

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

Anthony Grist Over a year ago

Since you're not removing the other classes, this doesn't work if you select green and then switch the value back to red or blue because the .green CSS declaration takes precedence over the others. Also, as with jackwanders answer, considerably more jQuery than required.

Collectives™ on Stack Overflow

jQuery add css class depending on selectbox option

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

jsFiddle demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related