Question

使用Bootstrap Dual Listbox（http://www.virtuosoft.eu/code/bootstrap-duallistbox/）时遇到了一些问题。当ListBox通过java Script填充时，它没有按预期工作。我的意思是不工作是列表没有正确填充，并且从两个列表框中传输选定的项目不是它应该工作的。不知何故，当列表由硬编码填充时，它运行良好。

这是一切运转良好的部分：

<div class="row-fluid">
    <div class="container">
        <select multiple="multiple" size="10" name="SelectItem" class="eItems" id="SelectItem">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3" selected="selected">Option 3</option>
            <option value="option4">Option 4</option>
            <option value="option5">Option 5</option>
            <option value="option6" selected="selected">Option 6</option>
            <option value="option7">Option 7</option>
            <option value="option8">Option 8</option>
        </select>

        <script type="text/javascript">
            var demo2 = $('.eItems').bootstrapDualListbox({
                nonselectedlistlabel: 'Non-selected',
                selectedlistlabel: 'Selected',
                preserveselectiononmove: 'moved',
                moveonselect: false,
                bootstrap2compatible : true
            });
        </script>
    </div>
</div>

但是当使用JavaScript填充时，会填充它，但功能运行不正常：

来自Controller的数据收集器：

<script type="text/javascript">
    function ProductChange() {
        $.getJSON("/WEBAPP/MasterData/GetItems", null, function (data) {        
            var items;
            $.each(data, function (i, item) {                
                items += "<option value=" + item.Value + ">" + item.Key + "</option>";          
            });

            $("#SelectItem").html(items);
        })
    }
</script>

此处填写的列表框：

<div class="row-fluid">
    <div class="row-fluid">
        <div class="container">
            <select id="SelectProduct"></select>
        </div>
    </div>

    <div class="row-fluid">
        <div class="container">
            <select multiple="multiple" size="10" name="SelectItem" class="eItems" id="SelectItem"></select>

            <script type="text/javascript">
                var demo2 = $('.eItems').bootstrapDualListbox({
                    nonselectedlistlabel: 'Non-selected',
                    selectedlistlabel: 'Selected',
                    preserveselectiononmove: 'moved',
                    moveonselect: false,
                    bootstrap2compatible : true
                });

                $(function () {
                    $("#SelectProduct").change(function () {
                        ProductChange();
                    });
                });
            </script>
        </div>
    </div>
</div>

控制器：

[HttpGet]
public JsonResult GetItems(int productID = 0)
{
    try
    {
        var items =
               from item in dbItem.items.ToList()
               join p in dbItem.Productitems.ToList()
               on item.itemID equals p.itemID
               where item.Language.LanguageCode.Trim() == repLanguage
               where p.ProductID == productID
               orderby item.DisplaySequence
               select new { Key = item.itemDescription, Value = item.itemID };

        if (items.Count() == 0)
        {
            items = from item in dbItem.items.ToList()
                    where item.Language.LanguageCode.Trim() == repLanguage
                    orderby item.DisplaySequence
                    select new { Key = item.itemDescription, Value = item.itemID };
        }

        return Json(items, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        return Json(new { Result = "ERROR", Message = ex.Message });
    }
}

是否因为每次触发操作发生时都会重新加载java脚本？如果解释不太清楚，请道歉，如果您需要更多信息，请告诉我。

非常感谢

Answer 1

我无法通过直接调用和填充函数正常填充列表框作为正常下拉列表。我更改了填充代码，如下所示

<select multiple="multiple" size="10" name="SelectItem" class="eItems" id="SelectItem"></select>

<script type="text/javascript">
    var demo2 = $('.eItems').bootstrapDualListbox({
        nonselectedlistlabel: 'Non-selected',
        selectedlistlabel: 'Selected',
        preserveselectiononmove: 'moved',
        moveonselect: false,
        bootstrap2compatible: true
    });

    $(function () {
        $("#SelectProduct").change(function () {
            $('#SelectItem').empty();
            demo2.trigger('bootstrapduallistbox.refresh');

            $.getJSON("/WEBAPP/MasterData/GetItems", { productID: $("#SelectProduct").val() }, function (data) {
                var items;
                $.each(data, function (i, item) {
                    demo2.append("<option value=" + item.Value + ">" + item.Key + "</option>");
                });
                demo2.trigger('bootstrapduallistbox.refresh');
            })
        });
    });

</script>

根据我的理解，列表项目使用原始代码重新填充。
如果我错了，请纠正我。

Answer 2

你应该尝试这样的事情：

demo2.trigger('bootstrapDualListbox.refresh' , true);

这适用于我！

Answer 3

对我而言，bootstrapDualListbox区分大小写 - bootstrapduallistbox无效。我想发布这个以防其他任何人有这个问题。

通过JavaScript填充Bootstrap Dual Listbox问题

3 个答案: