jqueryeventsbootstrap-4bootstrap-multiselect

bootstrap multiselect dropdown with optgroup


I got a dropdown as follows

 <select class="selectpicker" multiple>
      <optgroup label="option 1">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </optgroup>
      <optgroup label="option 2">
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
      </optgroup>
 </select>

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?

    $dropdown.on("changed.bs.select", "select", function (){
        var $option = $(this).find("option:selected", this); 
        var optGroup = $option.closest("optgroup").index(); 
     })

Solution

  • Try this http://jsfiddle.net/g9byn80a/

    <select id="msel" style="width:300px">
     <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
     </optgroup>
     <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
      <option value="WA">Washington</option>
     </optgroup>
    </select>
    
    <script>
    var memoryOne;
    
    $("option").mouseover(function () {
        var selectedOne = $("optgroup:nth-of-type(1)").children("option:selected").index();
        memoryOne = selectedOne;
    }).click(function () {
        var theSelectedIndex = $(this).index();
        var theParentIndex = $(this).parent().index();
        setTimeout(function () {
            clickEvent(theSelectedIndex, theParentIndex, memoryOne);
        }, 1);
    });
    
    function clickEvent(passedIndex, parentIndex, memoryOne, memoryTwo) {
        var selectionOne = memoryOne;
    
        var theParent = $("optgroup:eq(" + parentIndex + ")");
        var theOption = $("optgroup:eq(" + parentIndex + ") option:eq(" + passedIndex + ")");
        var theGrandParent = $("select");
        theParent.find("option:not(option:eq(" + passedIndex + "))").prop("selected", false);
    }
    </script>