Get all selected optgroups in bootstrap multiselect

Question

I am using this multiselect plugin (https://github.com/davidstutz/bootstrap-multiselect) I have set selectable optgroups on.

It is clear how to get selected options under optgroups.

selected Options gives your all selected options, but it does not contain selected optgoups

How to get selected optgoups in array. Thanks in advnace for your help!

Answer 1

You can select all the optgroup elements that contain a :checked option.

Example:

const select = $('select');
select.multiselect({
  enableClickableOptGroups: true,
  onChange(el) {
    const groups = select.find('optgroup:has(option:checked)').map((_, el) => el.label).get();
    console.log(groups);
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.min.css" integrity="sha512-fZNmykQ6RlCyzGl9he+ScLrlU0LWeaR6MO/Kq9lelfXOw54O63gizFMSD5fVgZvU1YfDIc6mxom5n60qJ1nCrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js" integrity="sha512-lxQ4VnKKW7foGFV6L9zlSe+6QppP9B2t+tMMaV4s4iqAv4iHIyXED7O+fke1VeLNaRdoVkVt8Hw/jmZ+XocsXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select multiple>
    <optgroup label="Group 1">
        <option value="1-1">Option 1.1</option>
        <option value="1-2">Option 1.2</option>
        <option value="1-3">Option 1.3</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="2-1">Option 2.1</option>
        <option value="2-2">Option 2.2</option>
        <option value="2-3">Option 2.3</option>
    </optgroup>
</select>