Search code examples
javascriptjquerybootstrap-4bootstrap-select

Only optgroup multiple (bootstrap-select)


I am using https://github.com/snapappointments/bootstrap-select/ v1.13.18 and I need to provide object, where only optgroup options can be multiple. So if we select non optgroup option, all other options are being deselect (including optgroup options) and if we select optgroup option all non optgroup options are being deseleted, but it is possible to select other optgroup options. Is there any built-in way to do this or it has to be written from scratch?

<select class="selectpicker" data-container="body" id="levels">
<option value="1">My tasks</option>
<optgroup id="departments" label="Departments tasks:" multiple>
<option value="8">Service</option>
<option value="1">Production</option>
</optgroup>
<option value="3" selected="">All tasks</option>
</select>

Solution

  • Finally I made something like this:

    const levels = document.getElementById("levels");
    var levels_selected_previous = Array.from(levels.selectedOptions);
    levels.addEventListener("change", (e) => {
      e.preventDefault();
      let levels_selected_current = Array.from(levels.selectedOptions);
      let last_selected_array = levels_selected_current.filter(el => !levels_selected_previous.includes(el));
      if(last_selected_array.length>0){
        let last_selected = last_selected_array[0].parentElement.nodeName;
      levels_selected_current.forEach(function(el) {
        if(last_selected==="OPTGROUP"){
        if (el.parentElement.nodeName !== "OPTGROUP") {
          el.selected = false;
        }
      } else {
        if (el.parentElement.nodeName === "OPTGROUP") {
          el.selected = false;
        } else if(el.parentElement.nodeName !== "OPTGROUP") {
          if (el !== last_selected_array[0]) {
            el.selected = false;
          }
        }
      }
    });
    }
    $(levels).selectpicker('refresh');
    levels_selected_previous = levels_selected_current;
    });