使用jQuery使用optgroup加载Bootstrap-Multiselect

Question

我像下面一样使用Bootstrap-multiselect：

 <label for="name">CARS</label>
    <select multiple title="Cars" class="selectpicker cars" id="cars">
      <optgroup label="Car">
        <option>Benz</option>
        <option>BMW</option>
        <option>Volvo</option>
        <option>Hyundai</option>
      </optgroup>
      <optgroup label="Bike">
        <option>Benz</option>
        <option>BMW</option>
        <option>Volvo</option>
        <option>Hyundai</option>
      </optgroup>
      <optgroup label="Bicycle">
        <option>Benz</option>
        <option>BMW</option>
        <option>Volvo</option>
        <option>Hyundai</option>
      </optgroup>
    </select>

而且我想基于Ajax调用加载它（选择选项）。我知道如何使用Ajax调用，但是我不知道如何基于optgroup填充multiselect（选择选项）。因为如您所见，它在不同的optgropus中具有相同的选项。

Answer 1

如果您知道如何处理Ajax请求，则只需将数据放入select标记并使用multiselect rebuild method

$(document).ready(function() {

  $('.selectpicker').multiselect();

  setTimeout(function() {
    // the method will be called after 3 seconds - just for testing
    rebuildMultiselect('<optgroup label="Test 00"><option>Test 01</option><option>Test 02</option></optgroup>');
  }, 3000);

  function rebuildMultiselect(data) {
    $('.selectpicker').html(data);
    $('.selectpicker').multiselect('rebuild');
  }

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

<label for="name">CARS</label>
<select multiple title="Cars" class="selectpicker cars" id="cars">
  <optgroup label="Car">
    <option>Benz</option>
    <option>BMW</option>
    <option>Volvo</option>
    <option>Hyundai</option>
  </optgroup>
  <optgroup label="Bike">
    <option>Benz</option>
    <option>BMW</option>
    <option>Volvo</option>
    <option>Hyundai</option>
  </optgroup>
  <optgroup label="Bicycle">
    <option>Benz</option>
    <option>BMW</option>
    <option>Volvo</option>
    <option>Hyundai</option>
  </optgroup>
</select>