使用 select2 折叠/展开 optgroup

Posted

技术标签:

【中文标题】使用 select2 折叠/展开 optgroup【英文标题】:Collapse / expand optgroup using select2 【发布时间】:2019-02-08 22:29:30 【问题描述】:

我正在尝试使用 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__optionsselect2-results__option 替换select2-results,但我已经尝试了很多方法,无论是否使用容器,我就是无法得到它去工作。我在 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>  

感谢任何帮助,谢谢!

【问题讨论】:

【参考方案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>

编辑:

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

在确定每个optgroup的折叠状态后,将opacity设置为0并设置回1

注意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>

【讨论】:

太棒了,谢谢!在此示例中,如何将 optgroups 启动为折叠状态? 只是顺便说一下你很棒。谢谢!

以上是关于使用 select2 折叠/展开 optgroup的主要内容,如果未能解决你的问题,请参考以下文章

使用 select2 的可选 optgroup

jQuery Select2 - 如何隐藏 Select2 Optgroup

Select2 v4.0 使 optgroups 可选

如何使用 JSON 在 select2 中设置 optgroup

Select2 中的可选 optgroup

将 select2.js 与多个选择 optgroup 和 knockoutJS 一起使用