javascript - 使用 select2 折叠/展开 optgroup
问题描述
我正在尝试使用 Select2 jquery 插件使我的选择下拉菜单中的 optgroups 可折叠/可扩展。
我发现看起来是一个很好且直接的解决方案(https://github.com/select2/select2/issues/730),但它对我不起作用,我认为这是因为它来自旧版本的 select2。
我已经想出了如何从
.select2-result-sub > li.select2-result {
display: none;
}
至
#select-container .select2-results__options--nested > li.select2-results__option {
display: none;
}
(我还根据如何覆盖 .select2-results .select2-highlighted color将我的选择对象放入容器中)
但是我不知道如何更新所需的javascript:
$('.select2-results').on('click', 'li', function(){
$(this).find('li').show();
});
在我看来,我只需要用 or 替换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>
任何帮助表示赞赏,谢谢!
解决方案
这是一个简单的演示。
$("#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>
编辑:
我们可以使用 event.collected 来启动optgroup
as collapsed 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>
推荐阅读
- javascript - ReferenceError:进程未在 firebase-messaging-sw.js 中定义
- javascript - 如何在 html 文件、Django 模板中使用 javascript 传递数据?
- c# - 使用对象创建更多动态查询
- ajax - 使用 Libcurl 从 Web 服务器中的 wicket ajax 获取响应
- redirect - 如何为重写规则设置此例外
- javascript - 如何获取在组件内单击的子元素?
- javascript - 使用 moment/JS 将时差转换为 HH:MM:SS
- c# - Xamarin 形成多个 NavigationPages
- c++ - 如何在头文件中外部对象?
- ios - 如何在 pdf 视图上拖动/移动 imageView?(目标-C)