多选下拉菜单 - 外侧的optgroup选项未在Field上添加

Question

我在我的页面上使用多个选择插件。实际上，当我检查它时，optgroup之外的选项不会在字段上添加。例如，我在optgroup之外使用了这些（pugal，Jino John）选项。

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

但是，当然可以提供更好的解决方案