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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.