title: How to add option groups to the multiselect-dropdown.js plugin?
body: <p>I'm using <code>multiselect-dropdown.js</code> plugin to customize my select tag. It run's perfectly but when I add an optiongroup it will not show. Is there a solution to show the option group label without the checkbox? I just want to add the optiongroup label only. Cause right now, the optiongroup is not showing.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var style = document.createElement('style');
  style.setAttribute("id","multiselect_dropdown_styles");
  style.innerHTML = `
  .multiselect-dropdown{
    display: inline-block;
    padding: 2px 5px 0px 5px;
    border-radius: 4px;
    border: solid 1px #ced4da;
    background-color: white;
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
  }
  .multiselect-dropdown span.optext, .multiselect-dropdown span.placeholder{
    margin-right:0.5em; 
    margin-bottom:3px;
    padding:1px 0; 
    border-radius: 4px; 
    display:inline-block;
  }
  .multiselect-dropdown span.optext{
    background-color:lightgray;
    padding:1px 0.75em; 
  }
  .multiselect-dropdown span.placeholder{
    color:#ced4da;
  }
  .multiselect-dropdown-list-wrapper{
    box-shadow: gray 0 3px 8px;
    z-index: 100;
    padding:2px;
    border-radius: 4px;
    border: solid 1px #ced4da;
    display: none;
    margin: -1px;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    background: white;
  }
  .multiselect-dropdown-list-wrapper .multiselect-dropdown-search{
    margin-bottom:5px;
  }
  .multiselect-dropdown-list{
    padding:2px;
    height: 15rem;
    overflow-y:auto;
    overflow-x: hidden;
  }
  .multiselect-dropdown-list::-webkit-scrollbar {
    width: 6px;
  }
  .multiselect-dropdown-list::-webkit-scrollbar-thumb {
    background-color: #bec4ca;
    border-radius:3px;
  }
  
  .multiselect-dropdown-list div{
    padding: 5px;
  }
  .multiselect-dropdown-list input{
    height: 1.15em;
    width: 1.15em;
    margin-right: 0.35em;  
  }
  .multiselect-dropdown-list div.checked{
  }
  .multiselect-dropdown-list div:hover{
    background-color: #ced4da;
  }
  .multiselect-dropdown span.maxselected {width:100%;}
  .multiselect-dropdown-all-selector {border-bottom:solid 1px #999;}
  `;
  document.head.appendChild(style);
  
  function MultiselectDropdown(options){
    var config={
      search:true,
      height:'15rem',
      placeholder:'select',
      txtSelected:'selected',
      txtAll:'All',
      ...options
    };
    function newEl(tag,attrs){
      var e=document.createElement(tag);
      if(attrs!==undefined) Object.keys(attrs).forEach(k=&gt;{
        if(k==='class') { Array.isArray(attrs[k]) ? attrs[k].forEach(o=&gt;o!==''?e.classList.add(o):0) : (attrs[k]!==''?e.classList.add(attrs[k]):0)}
        else if(k==='style'){  
          Object.keys(attrs[k]).forEach(ks=&gt;{
            e.style[ks]=attrs[k][ks];
          });
         }
        else if(k==='text'){attrs[k]===''?e.innerHTML='&amp;nbsp;':e.innerText=attrs[k]}
        else e[k]=attrs[k];
      });
      return e;
    }
  
    
    document.querySelectorAll("select[multiple]").forEach((el,k)=&gt;{
      
      var div=newEl('div',{class:'multiselect-dropdown',style:{width:config.style?.width??el.clientWidth+'px',padding:config.style?.padding??''}});
      el.style.display='none';
      el.parentNode.insertBefore(div,el.nextSibling);
      var listWrap=newEl('div',{class:'multiselect-dropdown-list-wrapper'});
      var list=newEl('div',{class:'multiselect-dropdown-list',style:{height:config.height}});
      var search=newEl('input',{class:['multiselect-dropdown-search'].concat([config.searchInput?.class??'form-control']),style:{width:'100%',display:el.attributes['multiselect-search']?.value==='true'?'block':'none'},placeholder:'search'});
      listWrap.appendChild(search);
      div.appendChild(listWrap);
      listWrap.appendChild(list);
  
      el.loadOptions=()=&gt;{
        list.innerHTML='';
        
        if(el.attributes['multiselect-select-all']?.value=='true'){
          var op=newEl('div',{class:'multiselect-dropdown-all-selector'})
          var ic=newEl('input',{type:'checkbox'});
          op.appendChild(ic);
          op.appendChild(newEl('label',{text:config.txtAll}));
    
          op.addEventListener('click',()=&gt;{
            op.classList.toggle('checked');
            op.querySelector("input").checked=!op.querySelector("input").checked;
            
            var ch=op.querySelector("input").checked;
            list.querySelectorAll("input").forEach(i=&gt;i.checked=ch);
            Array.from(el.options).map(x=&gt;x.selected=ch);
    
            el.dispatchEvent(new Event('change'));
          });
          ic.addEventListener('click',(ev)=&gt;{
            ic.checked=!ic.checked;
          });
    
          list.appendChild(op);
        }
  
        Array.from(el.options).map(o=&gt;{
          var op=newEl('div',{class:o.selected?'checked':'',optEl:o})
          var ic=newEl('input',{type:'checkbox',checked:o.selected});
          op.appendChild(ic);
          op.appendChild(newEl('label',{text:o.text}));
  
          op.addEventListener('click',()=&gt;{
            op.classList.toggle('checked');
            op.querySelector("input").checked=!op.querySelector("input").checked;
            op.optEl.selected=!!!op.optEl.selected;
            el.dispatchEvent(new Event('change'));
          });
          ic.addEventListener('click',(ev)=&gt;{
            ic.checked=!ic.checked;
          });
  
          list.appendChild(op);
        });
        div.listEl=listWrap;
  
        div.refresh=()=&gt;{
          div.querySelectorAll('span.optext, span.placeholder').forEach(t=&gt;div.removeChild(t));
          var sels=Array.from(el.selectedOptions);
          if(sels.length&gt;(el.attributes['multiselect-max-items']?.value??5)){
            div.appendChild(newEl('span',{class:['optext','maxselected'],text:sels.length+' '+config.txtSelected}));          
          }
          else{
            sels.map(x=&gt;{
              var c=newEl('span',{class:'optext',text:x.text});
              div.appendChild(c);
            });
          }
          if(0==el.selectedOptions.length) div.appendChild(newEl('span',{class:'placeholder',text:el.attributes['placeholder']?.value??config.placeholder}));
        };
        div.refresh();
      }
      el.loadOptions();
      
      search.addEventListener('input',()=&gt;{
        list.querySelectorAll("div").forEach(d=&gt;{
          var txt=d.querySelector("label").innerText.toUpperCase();
          d.style.display=txt.includes(search.value.toUpperCase())?'block':'none';
        });
      });
  
      div.addEventListener('click',()=&gt;{
        div.listEl.style.display='block';
        search.focus();
        search.select();
      });
      
      document.addEventListener('click', function(event) {
        if (!div.contains(event.target)) {
          listWrap.style.display='none';
          div.refresh();
        }
      });    
    });
  }
  
  window.addEventListener('load',()=&gt;{
    MultiselectDropdown(window.MultiselectDropdownOptions);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>select {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select multiple multiselect-search="true" multiselect-select-all="true" multiselect-max-items="3" class="w-full mt-8 no-border"&gt;
    &lt;optgroup label="Tenants"&gt;
      &lt;option&gt;Create Proposal&lt;/option&gt;
      &lt;option&gt;Retrieve Customer Data&lt;/option&gt;
      &lt;option&gt;Edit Dependant Data&lt;/option&gt;
    &lt;/optgroup&gt;
  
    &lt;optgroup label="User"&gt;
      &lt;option&gt;User 1&lt;/option&gt;
      &lt;option&gt;User 2&lt;/option&gt;
      &lt;option&gt;User 3&lt;/option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>