jquery-select2 - Select2 v4.0 使 optgroups 可选

Question

我正在使用最新版本的 select2 (4.0.0)，但找不到使 optgroups 可选的选项。

optgroup 用于对下拉列表的不同选项进行分组，如其基本示例所示:


我也需要这个 optgoup 是可选的!这在 3.5.1 中是可能的，但它不再是 4.0.0 中的默认设置。

我的代码如下所示:

$(document).ready(function() {
   $('#countrySelect').select2({
     data: [{
       text: "group",
       "id": 1,
       children: [{
         "text": "Test 2",
         "id": "2"
       }, {
         "text": "Test 3",
         "id": "3",
         "selected": true
       }]
     }]
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet" />


<select id="countrySelect" style="width: 380px;" placeholder="Select regions..."></select>

Answer 1

这是 requested over on GitHub ，但实际上 it is not actually possible .以前可以使用 <input /> ，但切换到 <select>意味着我们现在 explicitly disallow a selectable <optgroup> .

这里有一个 Select2 可能永远无法解决的技术障碍:标准 <optgroup>无法在浏览器中选择。并且因为一个带有 children 的数据对象转换为 <optgroup>带套套<option>元素，该问题适用于您遇到相同问题的情况。

最好的解决方案是 have an <option> for selecting the group ，就像使用标准选择一样。没有 <option>标记，无法将选定的值设置为组(因为该值实际上不存在)。 Select2 甚至还有一个 templateResult选项( formatResult 在 3.x 中)，因此您可以将其设置为跨浏览器一致的组。