Question

一切！ bootstrap-select 可以选择论坛吗？

这意味着当我选择一个组时，它可以通过jquery自动选择属于该组的项目（optgroup）

对于bootstrap-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>

我需要它..当选择组时，它不会选择自己，相反选择具有组ID的所有相同类...

并将所选项目ID推送到数组！

现在我只能获得所有选定的项目....对我的案例有任何想法...... 谢谢你

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”，“bootstrap-select”之后的“change”事件触发器执行其工作/功能/事件。

所以我稍微调整你的代码并使用下面的“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 multiple select，如何选择所选组后的整个组项

1 个答案: