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>
<select class="form-control" multiple>
  <optgroup label="Condiments" data-max-options="2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Breads" data-max-options="2">
    <option>Plain</option>
    <option>Steamed</option>
    <option>Toasted</option>
  </optgroup>
</select>

<select multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</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

var arr = new Array();
$('#join_person').on('change', function(evt, params){
//$("li  > a").trigger("click");
//alert($("option:selected:last", this).attr('class'));
//alert(params.select());

	//if($(this).hasClass)
  //var t = $(this).find("option").is(":selected").map(function(n){
 // 	return n;
  //});
  alert(this.value);
     $(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;
            });             
         }
     });

    alert("Last selected : " + arr[arr.length-1] +" | array_item:"+ arr);

  });