How to multiple dropdown options to add class to element when there are multiple dropdowns on the page?

Question

I currently am running this code for a dropdown selection box. When different options are chosen, a class is added to a div element. So far all of this code works without an issue. The problem is I would like to have it work for multiple dropdown selectors on a single page. The div mcga_ has multiples of them which change "mcga_1, mcga_2, etc). I have tried running the code twice and changing the element names, but only one selector will work and the other will not do anything. Here is what works so far;

$(document).ready(function(){
$("select[name*='custom_fields[mcgroup1]']").change(function(){
    select_changed();
    });
});

function select_changed(){
$("div[id*='mcga_']").each(function(){
   $(this).removeClass('addThis');
});
$("select[name*='custom_fields[mcgroup1]']").each(function(){
    var selected = $(this).val();
    $('#'+selected).addClass('addThis');
});
}

That works without a problem. It adds the class "addThis" to every "mcga_*" div. I tried the following to make it work with a different dropdown as well on the same page, but to no avail.

$(document).ready(function(){
$("select[name*='custom_fields[mcgroup1]']").change(function(){
    select_changed();
    });
});

function select_changed(){
$("div[id*='mcga_']").each(function(){
   $(this).removeClass('addThis');
});
$("select[name*='custom_fields[mcgroup2]']").each(function(){
    var selected = $(this).val();
    $('#'+selected).addClass('addThis');
});
}
$(document).ready(function(){
$("select[name*='custom_fields[mcgroup2]']").change(function(){
    select_changed();
    });
});

function select_changed(){
$("div[id*='mcgb_']").each(function(){
   $(this).removeClass('addThis2');
});
$("select[name*='custom_fields[mcgroup2]']").each(function(){
    var selected = $(this).val();
    $('#'+selected).addClass('addThis2');
});
}

Any help to get this code to clean up and work with multiple dropdown menu's will be great.

Cheers!

Hi, Can you share the code of HTML CSS as well on some code snippets tool like jsfiddle.net. That will become more easier to understand this question. — Prashant Kabade
– Prashant Kabade, Commented Sep 18, 2018 at 9:22

Luke · Accepted Answer · 2018-09-18 09:31:11Z

1

First of all you use the same function name for your change event. In a quick and dirty way you could call the function select_changed_2 or so.

For a cleaner way I would recommend data attributes for your select fields and work with them.

$(document).ready(function(){
  $("select[name*='custom_fields']").change(function(){
    select_changed( $(this).attr('data-change-it') );
  });
});

function select_changed(change_IDs){
  $("div[id*='"+ change_IDs +"']").each(function(){
    $(this).removeClass('addThis');
  });
  $("select[data-change-it*='"+ change_IDs +"']").each(function(){
    var selected = $(this).val();
    $('#'+selected).addClass('addThis');
  });
}

Your select field should get something like this:

<select name="custom_fields[mcgroup1]" data-change-it="mcga_"></select>
<select name="custom_fields[mcgroup2]" data-change-it="mcgb_"></select>

answered Sep 18, 2018 at 9:31

Luke

1063 bronze badges

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

1 Comment

so2018 Over a year ago

Hi. Due to the software I am using I am unable to add "data-change-it" to the selector. I am stuck with the name and class only. Having said that, changing the function name worked. It is now working on both dropdown menu's. Thanks very much! Is there a way to tidy the code using only what is available? (I can't add data attributes to the selector). Cheers.

Collectives™ on Stack Overflow

How to multiple dropdown options to add class to element when there are multiple dropdowns on the page?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related