使用 jquery 基于 optgroup 加载 Bootstrap-Multiselect

Question

我正在使用Bootstrap-select，如下所示：

 <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 填充多选（选择选项）。因为如你所见，它在不同的 optgropus 中具有相同的选项。

更新

$(document).on('click', '.ModalButton', function(ev){ 
    ev.preventDefault();
    var url = $(this).data("form"); 
    var company_name = $(this).data('target');
    $(".Modal").unbind().load(url, function() { 
        $.ajax({
            type: "GET",
            url: "/app/edit/",
            data: {
                company_name: company_name,
                csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
            },
            success: function(data) {
                <<<<<< Multiselect Populating Code should be placed here >>>>>>>>
            }
        });
        $(this).modal('show');
    });
    return false;
});

Ajax 响应将是：

Car: Benz, Car: BMW, Bike: Benz, Bicycle: Volvo

Answer 1

您的问题的片段

在您最后评论重要细节后，您只需在 success 上使用此功能

// ...
success: function (data) {
  var html = '';
  var target = $('#cars');

  // data has to be in this format for the following loop:
  // '{"Car":["Benz","BMW"],"Bike":["Benz"],"Bicycle":["Volvo"]}'

  $.each(data, function(optGroup, elements) {
    html += '<optgroup label="' + optGroup + '">';

    $.each(elements, function(index, element) {
      html += '<option value="">' + element + '</option>';
    });

    html += '</optgroup>';
  });

  target.html(html);
}
// ...

工作示例

我在下面构建了这个 sn-p 的工作示例

// you said that the data of your success method is json parsed, so you do not neet do parse the data again in your script
setTimeout(function() {
  successMethod(
    JSON.parse('{"Car":["Benz","BMW"],"Bike":["Benz"],"Bicycle":["Volvo"]}')
  );
  // just set 3 seconds for testing
}, 3000)

function successMethod(data) {
  var html = '';
  var target = $('#cars');

  // data has to be in this format for the following loop:
  // '{"Car":["Benz","BMW"],"Bike":["Benz"],"Bicycle":["Volvo"]}'

  $.each(data, function(optGroup, elements) {
    html += '<optgroup label="' + optGroup + '">';

    $.each(elements, function(index, element) {
      html += '<option value="">' + element + '</option>';
    });

    html += '</optgroup>';
  });
  
  target.html(html);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<label for="name">CARS</label>
<select multiple title="Cars" class="custom-select" 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>