通过JavaScript填充Bootstrap Dual Listbox问题

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>

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