Load Bootstrap -Multiselect на основе optgroup с использованием jquery - PullRequest
Новая
       53

Load Bootstrap -Multiselect на основе optgroup с использованием jquery

0 голосов
/ 30 апреля 2020

Я использую Bootstrap -выберите , как показано ниже: 

 <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.

UPDATE 

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

1 Ответ

0 голосов
/ 30 апреля 2020

SNIPPET ДЛЯ ВАШЕГО ВОПРОСА

После вашего последнего комментария с важными деталями вам просто нужно использовать эту функцию на 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);
}
// ...

РАБОТА ПРИМЕР

Ниже приведен рабочий пример этого фрагмента 

// 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>
...