分层选项

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>不可嵌套，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>如何不是真正嵌套的，无论关卡如何，它们只会呈现一层深度。

$(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>的含义，以产生效果。

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

1 个答案:

分层选项

在练习/演示中

解决方法