Select2 - 无法从多级树中选择值

Question

我有一个多级 Select2，分为组、子组和选项。预期的行为是只能选择选项。由于未知原因，只能选择第一级子级（意思是下面代码中的选项 1.1 和选项 1.2）：

$(function() {
  var theData = [{
      "id": "",
      "text": ""
    },
    {
      "text": "Group 1",
      "children": [{
          "id": 1,
          "text": "Option 1.1"
        },
        {
          "id": 2,
          "text": "Option 1.2"
        }
      ]
    },
    {
      "text": "Group 2",
      "children": [{
          "id": 3,
          "text": "Subgroup 2.1",
          "children": [{
              "id": 41,
              "text": "Option 2.1.1"
            },
            {
              "id": 42,
              "text": "Option 2.1.2"
            }
          ]
        },
      ]
    }
  ];
  $("#mySelect").select2({
    placeholder: "Select a option...",
    data: theData
  });
});

HTML 是这样的

<select id="mySelect" class="form-control" style="width:400px;"></select>

我做了一个小提琴来更好地展示这个https://jsfiddle.net/zjy16uo9/。在那里你可以看到只能选择这两个值。

Answer 1

您遇到了 HTML 版本 5 及以下版本的限制。 <optgroup>s 不可嵌套，their only allowed parent is <select>。

Select2 docs warn against it:

由于 Select2 在创建嵌套选项时会生成 <optgroup>，因此仅支持单层嵌套。不能保证在所有浏览器和设备上都能正确显示任何额外的嵌套级别。

Furthermore:

分层选项

根据 HTML 规范，只允许单层嵌套。 如果您将 <optgroup> 嵌套在另一个 <optgroup>, 中，则 Select2 将 无法检测到额外的嵌套级别，并且可能会出现错误 结果触发。

此外，<optgroup> 元素不能选择。 这是 HTML 规范的限制，并不是 Select2 可以克服的限制。

如果您希望创建一个真正的可选选项层次结构，请使用 <option> 而不是 <optgroup> 和 change the style with CSS。请注意，这种方法可能被认为是“少 可访问”，因为它依赖于 CSS 样式，而不是语义 <optgroup>的意思，产生效果。

实践/演示

如前所述，Select2 呈现<select>。从你的小提琴中，你可以通过检查 DOM 来获得它呈现的那个。

我复制了渲染的 DOM 并粘贴在下面的演示中。

看看嵌套的<optgroup>s 是如何不是真正嵌套的，无论是哪一层，它们都只渲染一层。

$(function() {
  var theData = [{
      "id": "",
      "text": ""
    },
    {
      "text": "Group 1",
      "children": [{
          "id": 1,
          "text": "Option 1.1"
        },
        {
          "id": 2,
          "text": "Option 1.2"
        }
      ]
    },
    {
      "text": "Group 2",
      "children": [{
          "id": 3,
          "text": "Subgroup 2.1",
          "children": [{
              "id": 41,
              "text": "Option 2.1.1"
            },
            {
              "id": 42,
              "text": "Option 2.1.2"
            }
          ]
        },
        {
          "id": 4,
          "text": "Subgroup 2.2",
          "children": [{
              "id": 41,
              "text": "Subgroup 2.2.1",
              "children": [{
                "id": 41,
                "text": "Option 2.2.1.1"
              }]
            },
            {
              "id": 42,
              "text": "Subgroup 2.2.2",
              "children": [{
                  "id": 41,
                  "text": "Option 2.2.2.1"
                },
                {
                  "id": 42,
                  "text": "Option 2.2.2.2"
                }
              ]
            }
          ]
        }
      ]
    }
  ];
  $("#mySelect").select2({
    placeholder: "Select a option...",
    data: theData
  });
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">

<select id="mySelect" class="form-control" style="width:400px;"></select>

<br>
<hr>
<br>
Notice how these nested optgroups are rendered as if they weren't nested at all. They are all only one level deep:<br>
<select>
    <option value="" data-select2-id="1"></option>
    <optgroup label="Group 1" data-select2-id="2">
        <option value="1" data-select2-id="3">Option 1.1</option>
        <option value="2" data-select2-id="4">Option 1.2</option>
    </optgroup>
    <optgroup label="Group 2" data-select2-id="5">
        <optgroup label="Subgroup 2.1" data-select2-id="6">
            <option value="41" data-select2-id="7">Option 2.1.1</option>
            <option value="42" data-select2-id="8">Option 2.1.2</option>
        </optgroup>
        <optgroup label="Subgroup 2.2" data-select2-id="9">
            <optgroup label="Subgroup 2.2.1" data-select2-id="10">
                <option value="41" data-select2-id="11">Option 2.2.1.1</option>
            </optgroup>
            <optgroup label="Subgroup 2.2.2" data-select2-id="12">
                <option value="41" data-select2-id="13">Option 2.2.2.1</option>
                <option value="42" data-select2-id="14">Option 2.2.2.2</option>
            </optgroup>
        </optgroup>
    </optgroup>
</select>

解决方法

我会关注suggested by Select2：

如果您希望创建一个真正的可选选项层次结构，请使用 <option> 而不是 <optgroup> 和 change the style with CSS。请注意，这种方法可能被认为是“少 可访问”，因为它依赖于 CSS 样式，而不是语义 <optgroup>的意思，产生效果。