Раскрывающийся список множественного выбора - вне поля опции optgroup не добавляются на поле

Question

Я использую плагин множественного выбора на своей странице.На самом деле здесь опции, которые вне optgroup не добавляются на поле, когда я проверяю это.Например, я использовал эти параметры (pugal, Jino John) за пределами 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

Я решил эту проблему так,

$('#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>

Но, конечно, может быть предложено лучшее решение