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

You should inspect the select elements on the page that you visually see. It looks like you are trying to change the <select> elements on the page. IIRC, bootstrap creates it's own select structure with divs and stuff as part of the library, which is how it is able to make it look pretty and function differently from the native select elements. Long story short, if you are trying to change the classes on the native <select> elements, which are most likely hidden, instead of the things that bootstrap makes that is most likely the source of your issue. — Taplar
– Taplar, Commented Jan 19, 2018 at 20:44
It does say 'select' but then it searches to find '.filter-option', which is actually being used instead of the default. I can see that when I click on it I am getting the behaviour I want and when I inspect it I can find it is using the booststrap class '.filter-option', so it's not the native hidden element that you mentioned. Like I said, I'm using the same mechanism to try to add and remove classes. Adding works so I don't understand why removing doesn't work. — Rob Kwasowski
– Rob Kwasowski, Commented Jan 19, 2018 at 20:51
I'm confused then as if I look at silviomoreto.github.io/bootstrap-select/examples at some examples, the visible select element I see is actually a span. And the menu that shows up when I click on it with the options is an unordered list with lis. Not the native select you say you are seeing when you inspect the visible element on the page. — Taplar
– Taplar, Commented Jan 19, 2018 at 20:55

Shashank · Accepted Answer · 2018-01-19 21:13:06Z

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. :)

Thanks so much! I managed to get round the problem by replicating the CSS classes in a dictionary, but this means I won't have to. Awesome

Rob Kwasowski · Accepted Answer · 2018-01-19 21:10:37Z

0

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()]);
      });
});

answered Jan 19, 2018 at 21:10

Rob Kwasowski

2,7903 gold badges16 silver badges34 bronze badges

Collectives™ on Stack Overflow

JavaScript removeClass not working on bootstrap-select

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related