Multi select dropdown - Out side the optgroup options are not adding on the Field

Question

I'm using multiple select plugin on my page. Actually here the options which outside the optgroup are not adding on the field, when i check it. For instance, i have used these(pugal, Jino John) options outside the optgroup.

 $('#exampleFormControlSelect2').multipleSelect({ filter: true, selectAll: true, selectAllText: 'Everyone in Project', width: '100%' });

 .sub-options { padding-left: 18px; } .ms-parent { max-width: 300px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.css" rel="stylesheet" /> <div class="container"> <div class="form-group mt-5"> <select multiple class="" id="exampleFormControlSelect2"> <option value="pugal" class="options">Pugal</option> <option value="jino" class="options">Jino John</option> <optgroup label="Group 1" class="group-title"> <option value="1" class="sub-options">Pk Prabu</option> <option value="2" class="sub-options">Gora Ramamoorthy</option> </optgroup> <optgroup label="Group 2" class="group-title"> <option value="11" class="sub-options">210</option> <option value="12" class="sub-options">321</option> </optgroup> <optgroup label="Group 3" class="group-title"> <option value="20" class="sub-options">012</option> <option value="21" class="sub-options">123</option> </optgroup> </select> </div> </div>

Answer 1

I solved this problem like that,

 $('#exampleFormControlSelect2').multipleSelect({ filter: true, selectAll: true, selectAllText: 'Everyone in Project', width: '100%' });

 .sub-options { padding-left: 18px; } .ms-parent { max-width: 300px; } .m-hidden{ visibility:hidden; height:0px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.css" rel="stylesheet" /> <div class="container"> <div class="form-group mt-5"> <select multiple class="" id="exampleFormControlSelect2"> <optgroup label="pugal" class="group-title"> <option value="pugal" class="sub-options m-hidden" >Pugal</option> </optgroup> <optgroup label="jino" class="group-title"> <option value="jino" class="sub-options m-hidden" >Jino John</option> </optgroup> <optgroup label="Group 1" class="group-title"> <option value="1" class="sub-options">Pk Prabu</option> <option value="2" class="sub-options">Gora Ramamoorthy</option> </optgroup> <optgroup label="Group 2" class="group-title"> <option value="11" class="sub-options">210</option> <option value="12" class="sub-options">321</option> </optgroup> <optgroup label="Group 3" class="group-title"> <option value="20" class="sub-options">012</option> <option value="21" class="sub-options">123</option> </optgroup> </select> </div> </div>

But,of course better solution can be offered