jquery - 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>

我做了一个 fiddle 来更好地演示这一点 https://jsfiddle.net/zjy16uo9/ 。您可以看到只能选择这两个值。

Answer 1

您已达到 HTML 版本 5 及更低版本的限制。 <optgroup> s 不可嵌套，their only allowed parent is <select> .

Select2 docs warn against it :

Because Select2 generates an <optgroup> when creating nested options, only a single level of nesting is supported. Any additional levels of nesting is not guaranteed to be displayed properly across all browsers and devices.

Furthermore :

Hierarchical options

Only a single level of nesting is allowed per the HTML specification. If you nest an <optgroup> within another <optgroup>, Select2 will not be able to detect the extra level of nesting and errors may be triggered as a result.

Furthermore, <optgroup> elements cannot be made selectable. This is a limitation of the HTML specification and is not a limitation that Select2 can overcome.

If you wish to create a true hierarchy of selectable options, use an <option> instead of an <optgroup> and change the style with CSS. Please note that this approach may be considered "less accessible" as it relies on CSS styling, rather than the semantic meaning of <optgroup>, to generate the effect.

实践/演示

如上所述，Select2 呈现 <select> 。从你的 fiddle 中，你可以通过检查 DOM 来获取它呈现的那个。

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

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

$(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 :

If you wish to create a true hierarchy of selectable options, use an <option> instead of an <optgroup> and change the style with CSS. Please note that this approach may be considered "less accessible" as it relies on CSS styling, rather than the semantic meaning of <optgroup>, to generate the effect.