jQuery addClass example

Change class name on click in jQuery

by Aditya Sharma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<form>

<select name="filter1" multiple class="selectpicker">
  <optgroup class="selected">
    <option class="selectall" selected>All</option>
  </optgroup>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

<select name="filter2" class="selectpicker">
  <optgroup class="selected">
    <option class="selectall" selected>All</option>
  </optgroup>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

</form>
<div>
Results
</div>

JavaScript

(function($) {
    	$(function (){    	//When an option is selected in bootstrap-select it should be added to Selected optgroup
      	$('body').on("changed.bs.select", ".bootstrap-select", function(e, clickedIndex, isSelected, previousValue){
          var element = $(this);
          var selectElement = element.find("select");
          var optgroup = selectElement.find("optgroup.selected");
          if (optgroup.length == 0) {
              optgroup = $("<optgroup/>", {class: "selected"});
              selectElement.prepend(optgroup);
          }
          //If selected adds options to optgroup else removes from optgroup
          var clickedElement = selectElement.find("option").filter(":eq(" + clickedIndex + ")");
          if (isSelected) {
              clickedElement.detach().appendTo(optgroup);
          } else {
              clickedElement.detach().insertAfter(optgroup);
          }

          //When selectall option like All is selected rest options should be deselected and when any option is selected selectall should be removed from optgroup
          if (clickedElement.hasClass("selectall") && isSelected) {
              optgroup.find("option").not(".selectall").removeAttr("selected").detach().insertAfter(optgroup);
          } else if (!clickedElement.hasClass("selectall") && isSelected) {
              optgroup.find("option.selectall").removeAttr("selected").detach().insertAfter(optgroup);
          }
          //When selectall option exist it should be selected if nothing is selected
          if (optgroup.find("option").length == 0) {
             if (selectElement.find("option.selectall").length != 0)
                 selectElement.find("option.selectall").attr("selected", "selected").detach().appendTo(optgroup);
             else
                optgroup.remove();
          }
          selectElement.selectpicker("refresh");
      });

      
      });
    }(jQuery))