javascript - 分组多选

Question

我尝试使用 jQuery Select2 进行选择并使用 'option' 而不是 'optgroup' 使其可供选择。

有什么方法可以在我选择“第一个”时自动选择所有组？

<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

我为可选组找到了两个解决方案。首先基于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 的第二种方式，它基于隐藏的“输入”字段

jsfiddle jsfiddle without query