5

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

这是一切正常的部分：

<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脚本？如果解释不是很清楚，请道歉，如果您需要更多信息，请告诉我。

非常感谢

4

3 回答 3

8

我无法通过调用和填充函数来正确填充列表框，就像正常的下拉菜单一样。我改变了填充代码如下

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

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

于 2013-11-13T02:32:33.087 回答
2

你应该尝试这样的事情：

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

这对我有用！

于 2016-02-04T17:05:42.090 回答
0

对我来说，bootstrapDualListbox区分大小写 -bootstrapduallistbox没用。
我想发布这个以防其他任何人有这个问题。

于 2015-06-20T12:52:44.007 回答