Обновление значений, извлекаемых из базы данных с помощью lou jquery multiselect

Question

Я использую lou's multiselect.js для обновления выбранных значений, которые ранее были сохранены в базе данных. Я получаю выбранные значения из базы данных, однако он находится в неправильном столбце, как показано ниже. Я хотел бы получить значения из базы данных, которые не были выбраны (чтобы быть в леле), а также те, которые уже были выбраны (чтобы быть справа).

---

Перечня пунктов ниже (слева) уже был выбраны пункты будут возвращены из базы данных, но они должны быть под выбранных типов продуктов колонок вместо. А затем под Доступные типы продуктов покажет список элементов, которые еще не были отобраны.

---

HTML

Это получает ранее выбранные продукты из базы данных, как показано на рисунке выше

<select multiple id="product-multi-select" name="product-multi-select" ng-model="input_doc_type.product" required> 
    @foreach($inputDocData[0]->product as $data) 
    <option value="{{$data->id}}" selected>{{$data->name}}</option> 
    @endforeach 
</select> 

---

JQuery

получает все продукты

<script type="text/javascript"> 
jQuery(function ($) { 

    $("#product-multi-select").multiSelect({ 
     selectableHeader: "<div class='custom-header'>Available Product Types</div>", 
     selectionHeader: "<div class='custom-header'>Selected Product Types</div>" 
    }); 

    $(document).ready(function() { 

     var products = []; 

     $.get('/admin/products/all-products', function(data, response) { 
      $.each(data, function(index, value) { 
       products.push(value.name); 
      }); 
      $("#product-multi-select").multiSelect('select', products); 
      $(".ms-container").append('<i class="glyph-icon icon-exchange"></i>'); 
     }); 

    }); 

}); 
</script> 

Я не уверен, как идти об использовании этого. Любая помощь с этой проблемой была бы весьма признательна.

Answer 1

Чтобы решить эту проблему, мне пришлось добавить дополнительную функцию в файл js, который поддерживает распознавание выбранных значений (показано ниже). Это реплика функции addOption, которая поставляется вместе с файлом, но с небольшим обновлением.

multiselect.js

'selectedAddOption' : function(options){ 
     var that = this; 

     if (options.value) options = [options]; 
     $.each(options, function(index, option){ 
      if (option.value && that.$element.find("option[value='"+option.value+"']").length === 0){ 
       var $option = $('<option value="'+option.value+'" selected>'+option.text+'</option>'), 
        index = parseInt((typeof option.index === 'undefined' ? that.$element.children().length : option.index)), 
        $container = option.nested == undefined ? that.$element : $("optgroup[label='"+option.nested+"']") 

       $option.insertAt(index, $container); 
       that.generateLisFromOption($option.get(0), index, option.nested); 
      } 
     }) 
    }, 

---

После добавления этого куска кода в файл JS. Затем я сделал запрос из базы данных, которая вытащила все неиспользуемые продукты, а затем динамически их на выберите (показано ниже). Это было добавлено более на Доступные типы продуктов сторона

// retrieve all products 
     $.get('/admin/products/all-products', function(data, response) { 
      $.each(data, function(index, value) { 
       $('#product-multi-select').multiSelect('addOption', { value: value.id, text: value.name, index: 0 }); 
      }); 
      $("#product-multi-select").multiSelect('refresh'); 
      $(".ms-container").append('<i class="glyph-icon icon-exchange"></i>'); 
     }); 

---

Наконец, я затем сделал еще один запрос, который вытащил во всех продуктах, которые уже были выбраны, и это utlilized selectedAddOption который я добавил файл js.И они были затем также добавлены в поле выбора, над на выбранных видов продукции боковых

// retrieve all selected products 
     <?php foreach ($inputDocData[0]->product as $val) { ?> 
      $('#product-multi-select').multiSelect('selectedAddOption', { value: <?php echo $val->id; ?>, text: '<?php echo $val->name; ?>', index: 0 }); 
     <?php } ?> 
     $("#product-multi-select").multiSelect('refresh'); 
     $(".ms-container").append('<i class="glyph-icon icon-exchange"></i>'); 

---

Там НИКАКИЕ присутствует, потому что они динамически добавляются с помощью JQuery.

select multiple id="product-multi-select" name="product-multi-select[]" ng-model="input_doc_type.product" required></select> 

---

код сделал то, что он должен был сделать, и не было дублирования элементов в списке.

Надеюсь, это может стать полезным для кого-то еще.