Updating values being pulled from database using lou jquery multiselect

Question

I am using lou's multiselect.js to update selected values that were previously stored in the database. I am getting the selected values from the database, however it's in the wrong column, as shown below. I would like to retrieve the values from the database that weren't selected(to be on the lef) along with those that have already been selected(to be on the right).

---

The list of items below(on the left) were already selected items being brought back from the database, but they should be under the Selected Product Types column instead. And then under Available Product Types the list of items that have not been selected as yet should be shown.

---

HTML

This gets the previously selected products from the database as shown in the picture above

<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

Gets all the products

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

I'm not sure how to go about using this. Any assistance with this problem would be greatly appreciated.

Answer 1

To solve the problem I had to add an extra function in the js file which supports getting recognizing selected values (shown below). It's a replica of the addOption function that came with the file, but with one slight update.

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);
            }
        })
    },

---

After adding that piece of code to the js file. I then made a request from the database which pulled in all unused products and then dynamically them to the select (shown below). This was added over on the Available Product Types side

// 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>');
        });

---

Finally, I then made another request which pulled in all products that were already selected, and this utlilized the selectedAddOption which I added to the js file. And these were then also added to the select box, over on the Selected Product Types side

// 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>');

---

There are no present because they are dynamically added using jquery.

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

---

The code did what it was supposed to do and there were no duplication of items in the list.

I hope this may become helpful to someone else.