title: bootstrap multiselect dropdown with optgroup
body: <p>I got a dropdown as follows</p>
  <pre><code> &lt;select class=&quot;selectpicker&quot; multiple&gt;
        &lt;optgroup label=&quot;option 1&quot;&gt;
           &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
           &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
           &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
           &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
        &lt;/optgroup&gt;
        &lt;optgroup label=&quot;option 2&quot;&gt;
           &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
           &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
           &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
           &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
        &lt;/optgroup&gt;
   &lt;/select&gt;
  </code></pre>
  <p>I want to select only from one optgroup, whn I try to select option from another optgroup, need to deselect/ not allow to select if one optgroup already has an option selected. I tried changed.bs.select event to get the opt group index but not sure how to achieve this, any help?</p>
  <pre><code>    $dropdown.on(&quot;changed.bs.select&quot;, &quot;select&quot;, function (){
          var $option = $(this).find(&quot;option:selected&quot;, this); 
          var optGroup = $option.closest(&quot;optgroup&quot;).index(); 
       })
  </code></pre>