Create a single function change for various CSS Selectors in jQuery

Question

I use the function below to add CSS classes (blue, red, pink...) in a DIV .container from a select #selcolor. Is it possible to use the same function in other select tags with different IDs? In this case the classes (blue, red, pink...) would not be added to the DIV .container with it the variable "div_action" function would have to be modified.

  function select_changed() {
    jQuery('select#selcolor').each(function() {
      var selected = jQuery(this).val();
      var div_action = '.container';
      if(selected == '') {
        jQuery(div_action).addClass('');
      } 
      if(selected == 'blue') {
        jQuery(div_action).addClass('blue');
      } else {
        jQuery(div_action).removeClass('blue');
      }
      if(selected == 'pink') {
        jQuery(div_action).addClass('pink');
      } else {
        jQuery(div_action).removeClass('pink');
      };
      if(selected == 'red') {
        jQuery(div_action).addClass('red');
      } else {
        jQuery(div_action).removeClass('red');
      };
    });
  }
  $('select#selcolor').change(function() {
    select_changed();
  });

<!-- This is HTML -->

  <select name="selcolor" id="selcolor" class="form-control">
    <option value=''>Select Color</option>
    <option value="blue">Blue</option>
    <option value="pink">Pink</option>
    <option value="red">Red</option>
  </select>

how about pass the id unto the function so that you can use it to any select? — Juliver Galleto
– Juliver Galleto, Commented Mar 28, 2016 at 4:10

Rino Raj · Accepted Answer · 2016-03-28 03:59:49Z

2

event.currentTarget.id is used to get the id of the current target. So you can use this function for other select box also.

Note: I have assumed the select box as a single select and simplified the code a bit.

 function select_changed(id) {
   jQuery('select#'+id).each(function() {
     var selected = jQuery(this).val();
     var div_action = '.container';
     jQuery(div_action).removeClass("blue pink red");
     jQuery(div_action).addClass(selected);
   });
 }
 $('select').change(function(event) {
   select_changed(event.currentTarget.id);
 });

answered Mar 28, 2016 at 3:59

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

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

Comments

Rino Raj · Accepted Answer · 2016-03-28 06:47:01Z

1

Try using onChange function,this is just logic you can do whatever inside you needs.

Function:

function select_changed(val) {
  var selectedValue=val;
  if(selectedValue=='blue'){
    alert("1"+selectedValue);
  }
  else if(selectedValue=='pink'){
    alert("2"+selectedValue);
  }
  else if(selectedValue=='red'){
    alert("3"+selectedValue);
  }
}

html:

<select name="selcolor" id="selcolor" class="form-control" onchange="select_changed(this.value)">
  <option value=''>Select Color</option>
  <option value="blue">Blue</option>
  <option value="pink">Pink</option>
  <option value="red">Red</option>
</select>

edited Mar 28, 2016 at 6:47

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

answered Mar 28, 2016 at 5:04

AnandKumar Selvamani

3991 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

Create a single function change for various CSS Selectors in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related