JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/silviomoreto/bootstrap-select/master/dist/css/bootstrap-select.css">
<script src="https://rawgit.com/silviomoreto/bootstrap-select/master/dist/js/bootstrap-select.js"></script>
<div class="result"></div>
<br/>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Try Click My Header
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Dropdown header 1</li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Dropdown header 2</li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
<br/>
<select class="selectpicker" id="join_person" multiple>

     <optgroup label="GROUP A (Click Me To Select All)">
    <option class="A d" id="1">andy</option>
    <option class="A" id="2">peter</option>
    <option class="A" id="3">amy</option>
</optgroup>
     <optgroup label="GROUP B (Click Me To Select All)">
    <option id="B">group2</option>
    <option class="B" id="4">kelly</option>
    <option class="B" id="5">tim</option>
</optgroup>

</select>

<select class="selectpicker" id="join_person" multiple>

     <optgroup label="GROUP A (Click Me To Select All)">
    <option class="A d" id="1">andy</option>
    <option class="A" id="2">peter</option>
    <option class="A" id="3">amy</option>
</optgroup>
     <optgroup label="GROUP B (Click Me To Select All)">
    <option id="B">group2</option>
    <option class="B" id="4">kelly</option>
    <option class="B" id="5">tim</option>
</optgroup>

</select>

JavaScript

$("li").on('click', function(){
		//var header 	= $(this).hasClass
		var base 		= $(this).closest(".bootstrap-select");
		
    if(base.length && $(this).hasClass("dropdown-header")){ // check if this .dropdown-header is part of bootstrap-select or not
      var group 	= $(this).data("optgroup");
      var select 	= $(this).closest(".bootstrap-select").find("select");

      if(base.find("li[data-optgroup=" + group + "]:not(.selected)").length === 1)
        base.find("li[data-optgroup=" + group + "] > a").trigger("click");
      else
        base.find("li[data-optgroup=" + group + "]:not(.selected) > a").trigger("click");

      var rs 	= select.mySelect();
      $(".result").text(rs);
    }else{
			$(".result").text("not a bootstrap-select");
    }
  });
  
  /* function onchange */
	$.fn.mySelect = function(){ 
    var arr = new Array();
		$(this).find("option").each(function()
     {
         if($(this).is(":selected"))
         {             
            id = $(this).attr("id");
            class_dept = $(this).attr("class");
            if(id == class_dept){
                //do something
                }
            if(arr.indexOf(id) == -1)
            {
               arr.push(id); 
            }
         }
         else
         {
             id = $(this).attr("id");
             arr = jQuery.grep(arr, function(value) {
             return value != id;
            });             
         }
     });
		
    return "Last selected : " + arr[arr.length-1] +" | array_item:"+ arr;
    
    }