Create a single function change for various CSS Selectors in jQuery

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>

Answers 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>
    

Related Articles