bootstrap 多个 select ，如何在 selected 组后 select 整个组项目

Question

全部！ bootstrap-select 可以加入 select 组吗？

这意味着当我 select 创建一个组时，它可以通过 jquery

自动 select 编辑属于组的项目（optgroup）

对于bootstrap-select是不允许select的！所以我用其他方式让它像一个组..

<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>

我需要它.. 当 select 组时，它不会 select 本身，相反 select 与组 ID 相同 class。 ..

并将 selected 的项目 id 推送到一个数组！

现在我只能得到所有 selected 项目....我的情况有什么想法吗... 非常感谢

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

你应该跳出框框思考。

由于 "bootstrap-select"，"change" 事件在 "bootstrap-select" 执行其 work/function/events 之后触发。

所以我稍微调整了你的代码并使用了下面的 "optgroup"。

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;

}

这里是活生生的例子：https://jsfiddle.net/synz/x6zud6v8/

bootstrap 多个 select ，如何在 selected 组后 select 整个组项目

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

html

jquery

optgroup

bootstrap-select