使用 select2 折叠/展开 optgroup [英] Collapse / expand optgroup using select2
问题描述
我正在尝试使用 Select2 jquery 插件使我的选择下拉菜单中的 optgroup 可折叠/可展开.
我发现了一个看起来不错且简单的解决方案(https://github.com/select2/select2/issues/730) 但它对我不起作用，我认为这是因为它来自旧版本的 select2.
我已经想出了如何从
更新 css.select2-result-sub >li.select2-result {显示:无；}到
#select-container .select2-results__options--nested >li.select2-results__option {显示:无；}(我还根据 如何覆盖 .select2-results .select2-highlighted 颜色)
但我不知道如何更新所需的 javascript:
$('.select2-results').on('click', 'li', function(){$(this).find('li').show();});在我看来，我只需要将 select2-results 替换为 select2-results__options 或 select2-results__option，但我我尝试了很多方法，使用和不使用容器，但我无法让它工作.我在 javascript/jquery 方面没有太多经验，所以我不太明白我在尝试选择 optgroup 元素时做错了什么.
另外，这是我的 html:
<select id="select-test" multiple="multiple" style="width:300px"><optgroup label="组 1"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></optgroup><optgroup label="第 2 组"><option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option></optgroup></选择>感谢任何帮助，谢谢！！
这是一个简单的演示.
$("#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 id="select-test" multiple="multiple" style="width:300px"><optgroup label="组 1"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></optgroup><optgroup label="第 2 组"><option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option></optgroup></选择>我们可以使用 select2:open 事件以折叠状态启动 optgroup.我添加了一个对象来记录每个 optgroup 的折叠状态.
在确定每个optgroup的折叠状态后，将opacity设置为0并将其设置回1.
注意 select2:open 在创建 .select2-results__group 之前触发，所以我使用 setTimeout 等待几毫秒.
$("#select-test").select2();让 optgroupState = {};$("body").on('click', '.select2-container--open .select2-results__group', function() {$(this).siblings().toggle();让 id = $(this).closest('.select2-results__options').attr('id');让 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(() => {让组 = $('.select2-container--open .select2-results__group');让 id = $('.select2-results__options').attr('id');如果 (!optgroupState[id]) {optgroupState[id] = {};}$.each(groups, (index, v) => {optgroupState[id][index] = optgroupState[id][index] ||错误的;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 id="select-test" multiple="multiple" style="width:300px"><optgroup label="组 1"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></optgroup><optgroup label="第 2 组"><option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option></optgroup></选择>I'm trying to use the Select2 jquery plugin to make the optgroups in my select drop down menu collapsible/expandable.
I found what looks to be a good and straightforward solution (https://github.com/select2/select2/issues/730) but it's not working for me and I think it's because it's from an older version of select2.
I've figured out how to update the css from
.select2-result-sub > li.select2-result {
display: none;
}
to
#select-container .select2-results__options--nested > li.select2-results__option {
display: none;
}
(where i've also put my select object in a container per How to override .select2-results .select2-highlighted color)
But I'm at a loss for how to update the required javascript:
$('.select2-results').on('click', 'li', function(){
$(this).find('li').show();
});
It seems to me like I would just need to replace select2-results with select2-results__options or select2-results__option, but I've tried a number of things, with and without using the container and I just can't get it to work. I don't have much experience in javascript/jquery so I don't really understand what I'm doing wrong with trying to select the optgroup element.
Also, here's my 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>
Any help is appreciated, thanks!!
Here's a simple demo.
$("#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>
Edit:
We can start the optgroup as collapsed by using select2:open event. I add an object to record the collapsed state of each optgroup.
Set opacity to 0 and set it back to 1 after determining the collapsed state of each optgroup.
Note that select2:open triggered before the .select2-results__group created, so I use setTimeout to wait for a few miliseconds.
$("#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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
