使用Lou Jquery MultiSelect更新從數據庫中提取的值

Question

我正在使用lou的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>');
        });

---

最后，然后我又提出了一個請求，該請求提取了所有已選擇的產品，並使用了我添加到js文件中的selectedAddOption 。 然后，將這些也添加到選擇框的“ 選定產品類型”一側

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

---

該代碼完成了應做的工作，並且列表中沒有重復的項目。

我希望這可能對其他人有所幫助。