分组多个 select

Question

我尝试用 jQuery Select2 制作 selection 并使用 'option' 而不是 'optgroup' 以使其可供选择。

当我选择 'FIRST' 时，有什么方法可以自动 select 所有组吗？

<select id="multipleSelectExample" data-placeholder="Select an option" multiple>
           <option>FIRST</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
           <option>SECOND</option>
            <option value="6">Option 6</option>
            <option value="7">Option 7</option>
            <option value="8">Option 8</option>
            <option value="9">Option 9</option>
            <option value="10">Option 10</option>
 </select>

https://jsfiddle.net/Asunaro/gs0cj7mr/

Answer 1

将此添加到您的 html <optgroup label="select all">

至于Javascript： https://jsfiddle.net/fchzd93s/

$(document).ready(function() {

    function RunSelect2(){
      $('#multipleSelectExample').select2({
         allowClear: true,
         closeOnSelect: false,
      }).on('select2:open', function() {  

        setTimeout(function() {
            $(".select2-results__option .select2-results__group").bind( "click", selectAlllickHandler ); 
        }, 0);

      });
    }

    RunSelect2();

    var selectAlllickHandler = function() {
        $(".select2-results__option .select2-results__group").unbind( "click", selectAlllickHandler );        
      $('#multipleSelectExample').select2('destroy').find('option').prop('selected', 'selected').end();
      RunSelect2();
    };
    });

Answer 2

我找到了两个可选组的解决方案。首先基于select2.optgroupSelect.js，这里是一个例子

 $('#target').select2();
  $(function(){
     $.fn.select2.amd.require(["optgroup-data", "optgroup-results"], 
         function (OptgroupData, OptgroupResults) {
         $('#target').select2({
             dataAdapter: OptgroupData,
             resultsAdapter: OptgroupResults,
             closeOnSelect: false,
    
         }); 
     });
 });

select {width:300px;}

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  ></script>
<script type='text/javascript' src="https://rawgit.com/bnjmnhndrsn/select2-optgroup-select/master/example/vendor/jquery.mousewheel.js"></script>
<script type='text/javascript' src="https://rawgit.com/bnjmnhndrsn/select2-optgroup-select/master/example/vendor/select2.js"></script>
<script type='text/javascript' src="https://rawgit.com/bnjmnhndrsn/select2-optgroup-select/master/dist/select2.optgroupSelect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css"  />
<select id="target" data-placeholder="Select an option" multiple='multiple'>
     <optgroup label="FIRST">
            <option value="1">Option 1</option>
            <option  value="2">Option 2</option>
            <option  value="3">Option 3</option>
            <option  value="4">Option 4</option>
            <option value="5">Option 5</option>
      </optgroup>
      <optgroup label="SECOND">
            <option class="456" value="6">Option 6</option>
            <option class="456" value="7">Option 7</option>
            <option class="456" value="8">Option 8</option>
            <option class="456" value="9">Option 9</option>
            <option class="456" value="10">Option 10</option>
       </optgroup>
 </select>

jsfiddle

我找到的第二种方法 here ，它基于隐藏的 'input' 字段

jsfiddle jsfiddle without query

分组多个 select

Group multiple select

javascript

jquery-select2