bootstrap multiple select , How to select the whole group items after selected group

Question

all! Is the bootstrap-select possible to select the group ?

which is mean when I selecting a group , it could auto selected the belong group item (optgroup) by jquery

for the bootstrap-select is not allow to select the ! so i use other way to make it like an group ..

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

    <option id="A">group1</option>
    <option class="A" id="1">andy</option>
    <option class="A" id="2">peter</option>
    <option class="A" id="3">amy</option>

    <option id="B">group2</option>
    <option class="B" id="4">kelly</option>
    <option class="B" id="5">tim</option>

</select>

And i need it.. when select the group ,it will not select itself ,contrarily to select all the same class with the group id ...

and push the selected item id to an Array!

now i can only get all selected item.... is there any idea for my case ... thank you so

var arr = new Array();
$('#join_person').on('change', function(){

     $(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);

  });

Answer 1

You should think out of the box.

Because of "bootstrap-select", the "change" event trigger after the "bootstrap-select" do its work/function/events.

So I tweaks your code a little bit and use the "optgroup" like below.

HTML

    <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 base        = $(this).closest(".bootstrap-select");
    var select  = base.find("select");

    if(base.length && select.prop("multiple")){ // check if this .dropdown-header is part of bootstrap-select AND multiple or not

        var group   = $(this).data("optgroup")-1;
        var group2  = group+1;
        var select  = $(this).closest(".bootstrap-select").find("select");

        if($(this).hasClass("dropdown-header")){

            if(base.find("li[data-optgroup=" + group2 + "]:not(.selected)").length === 1)
                $(this).closest(".bootstrap-select").find("select > optgroup:eq(" + group + ") > option").prop("selected",false);
            else
                $(this).closest(".bootstrap-select").find("select > optgroup:eq(" + group + ") > option").prop("selected",true);

            select.selectpicker('render');
            var rs  = select.mySelect();
            $(".result").text(rs);

        }else{
            setTimeout(function() { // set timeout because waiting for some bootstrap-select event done.
                var rs  = select.mySelect();
                $(".result").text(rs);
            }, 100);
        }
    }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;

}

And live example here : https://jsfiddle.net/synz/x6zud6v8/