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

---

该代码完成了应做的工作，并且列表中没有重复的项目。

我希望这可能对其他人有所帮助。