选择带有嵌套的optgroup元素，使所有optgroup可折叠

Question

在我的页面上，我制作了一个由select2插件转换成一个选择元素。

我已经建立了嵌套的optgroup，但是我无法使optgroup的第一级和第二级的可折叠性

。

我的脚本仅能使第二级折叠。

有人可以指导我解决此问题吗？

<div id="select-container">
        <select
            id="select-test"
            multiple="multiple"
            style="width:300px">
            <optgroup label="BMW">
                <optgroup label="&#160;&#160;&#160;Cars">
                    <option value="1">&#160;&#160;&#160;BMW X1</option>
                    <option value="2">&#160;&#160;&#160;BMW Z4</option>
                    <option value="3">&#160;&#160;&#160;BMW i3</option>
                </optgroup>
                <optgroup label="&#160;&#160;&#160;Motorcycles">
                    <option value="1">&#160;&#160;&#160;S 1000 RR</option>
                    <option value="2">&#160;&#160;&#160;K 1600 B</option>
                    <option value="3">&#160;&#160;&#160;F 800 GT</option>
                </optgroup>
            </optgroup>
            <optgroup label="Yamaha">
                <optgroup label="&#160;&#160;&#160;Motorcycles">
                    <option value="1">&#160;&#160;&#160;TDR125</option>
                    <option value="2">&#160;&#160;&#160;XT500</option>
                    <option value="3">&#160;&#160;&#160;YZR500</option>
                </optgroup>
                <optgroup label="&#160;&#160;&#160;Snowmobiles">
                    <option value="1">&#160;&#160;&#160;Viper L-TX</option>
                    <option value="2">&#160;&#160;&#160;Viking 540</option>
                    <option value="3">&#160;&#160;&#160;Sidewinder X-TX LE41</option>
                </optgroup>
            </optgroup>
        </select>
        <xp:scriptBlock id="scriptBlock1">
            <xp:this.value><![CDATA[$("#select-test").select2();

let optgroupState = {};

$("body").on('click', '.select2-container--open .select2-results__group', function() {
  $(this).siblings().toggle();
  let id = $(this).closest('.select2-results__options').attr('id');
  let index = $('.select2-results__group').index(this);
  optgroupState[id][index] = !optgroupState[id][index];
})

$('#select-test').on('select2:open', function() {
  $('.select2-dropdown--below').css('opacity', 0);
  setTimeout(() => {
    let groups = $('.select2-container--open .select2-results__group');
    let id = $('.select2-results__options').attr('id');
    if (!optgroupState[id]) {
      optgroupState[id] = {};
    }
    $.each(groups, (index, v) => {
      optgroupState[id][index] = optgroupState[id][index] || false;
      optgroupState[id][index] ? $(v).siblings().show() : $(v).siblings().hide();
    })
    $('.select2-dropdown--below').css('opacity', 1);
  }, 0);
})]]></xp:this.value>
        </xp:scriptBlock>
    </div>