Question

我正在尝试使用Select2 jquery插件使我的选择下拉菜单中的optgroup可折叠/可扩展。

我发现了看起来不错且简单的解决方案（https://github.com/select2/select2/issues/730），但它对我不起作用，我认为这是因为它来自select2的较旧版本。

我已经弄清楚了如何从

更新CSS。

.select2-result-sub > li.select2-result {
    display: none;
}

到

#select-container .select2-results__options--nested > li.select2-results__option {
    display: none;
}

（我还将每个How to override .select2-results .select2-highlighted color的选择对象都放在一个容器中）

但是我不知道如何更新所需的javascript：

$('.select2-results').on('click', 'li', function(){
    $(this).find('li').show();
});

在我看来，我只需要将select2-results替换为select2-results__options或select2-results__option，但是我已经尝试了很多方法，无论是否使用容器，我就是无法正常工作。我在javascript / jquery方面没有太多经验，所以我不太了解尝试选择optgroup元素的错误。

另外，这是我的html：

<div id="select-container">
    <select id="select-test" multiple="multiple" style="width:300px">
            <optgroup label="Group 1">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </optgroup>
            <optgroup label="Group 2">    
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
                <option value="6">Option 6</option>
            </optgroup>
     </select>     
 </div>

感谢您的帮助，谢谢！

Answer 1

这是一个简单的演示。

$("#select-test").select2();
$("body").on('click', '.select2-results__group', function() {
  $(this).siblings().toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div id="select-container">
  <select id="select-test" multiple="multiple" style="width:300px">
    <optgroup label="Group 1">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </optgroup>
    <optgroup label="Group 2">
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
    </optgroup>
  </select>
</div>

编辑：

我们可以使用optgroup事件将select2:open折叠起来。我添加了一个对象来记录每个optgroup的折叠状态。

在确定每个opacity的折叠状态后，将0设置为1，然后将其设置回optgroup。

请注意，select2:open在创建.select2-results__group之前触发，因此我使用setTimeout等待几毫秒。

$("#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);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div id="select-container">
  <select id="select-test" multiple="multiple" style="width:300px">
    <optgroup label="Group 1">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </optgroup>
    <optgroup label="Group 2">
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
    </optgroup>
  </select>
</div>

使用select2折叠/展开optgroup

1 个答案: