JavaScript removeClass not working on bootstrap-select

Question

I've got two bootstrap-select forms, that use the same JS. It's two lists of names of colours styled to appear in the colours described with CSS classes.

I've got the CSS class names also stored in each option element's value, so that it can be accessed by the JS, so it can remain in the right colour after and before clicked.

I'm trying to change the colour that way by adding and removing the classes with 'addClass' and 'removeClass', but removeClass isn't working. This means that you can click down through the various options and the option displayed will appear in the right colour, but when you go back and choose one previously clicked, it won't go back to that colour.

Can someone explain the problem?

As a JSFiddle

HTML

<div class="selectContainer">

  <select class="form-control pickerSelectClass" id="select_1">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106">■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>

  <select class="form-control pickerSelectClass" id="select_2">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106">■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>

</div>

CSS

.selectContainer {width:200px}

.big {
  font-size: 16px;
  font-weight: bold !important;
  text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
  }

._21 {
  color: red !important
  }

._106 {
  color: orange !important
  }

._24 {
  color: yellow !important
  }

JS

$(document).ready(function() {  
      $(".pickerSelectClass").selectpicker();   

      $('select').each(function(index, item){
            $(this).parent().find('.filter-option').addClass("big");
            $(this).parent().find('.filter-option').addClass($(this).val());


      }).on('change', function(){
            $(this).parent().find('.filter-option').removeClass('_*')
            $(this).parent().find('.filter-option').addClass($(this).val());
      });
});

External resources

jquery.min.js,
bootstrap.css,
bootstrap.min.js,
bootstrap-select.css,
bootstrap-select.min.js

Answer 1

jQuery's removeClass can also take a function (you can improvise on the regex):

(the removeClass in your code was looking for a class "_*" (a string))

Relevant code:

$(this).parent().find('.filter-option').removeClass(function(index, className) {
    return (className.match(/_\d*/g) || []).join(' ');
})

Here's a code snippet using that:

$(document).ready(function() {  
      $(".pickerSelectClass").selectpicker();   

      $('select').each(function(index, item){
      			$(this).parent().find('.filter-option').addClass("big");
            $(this).parent().find('.filter-option').addClass($(this).val());
            
            
      }).on('change', function(){
            $(this).parent().find('.filter-option').removeClass(function(index, className) {
            	return (className.match(/_\d*/g) || []).join(' ');
            })
            $(this).parent().find('.filter-option').addClass($(this).val());
      });
});

.selectContainer {width:200px}

.big {
  font-size: 16px;
  font-weight: bold !important;
  text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
  }
  
._21 {
  color: red !important
  }
  
._106 {
  color: orange !important
  }

._24 {
  color: yellow !important
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<div class="selectContainer">

  <select class="form-control pickerSelectClass" id="select_1">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106">■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>

  <select class="form-control pickerSelectClass" id="select_2">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106">■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>
  
</div>

Hope this helps. :)

Answer 2

I've managed to get round the issue by just replicating the CSS from the classes in a dictionary, with the keys as the class names and the values as the colours in the classes. As a JSFiddle.

JS

var dict = {};
dict["_21"] = "red";
dict["_106"] = "orange";
dict["_24"] = "yellow";

$(document).ready(function() {  
      $(".pickerSelectClass").selectpicker();   

      $('select').each(function(index, item){
                $(this).parent().find('.filter-option').addClass("big");
            $(this).parent().find('.filter-option').css("color",dict[$(this).val()]);


      }).on('change', function(){
            $(this).parent().find('.filter-option').css("color",dict[$(this).val()]);
      });
});