通过JavaScript填充Bootstrap Dual Listbox问题

时间:2013-11-07 02:57:29

标签: javascript asp.net-mvc-4 twitter-bootstrap razor

使用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脚本? 如果解释不太清楚,请道歉,如果您需要更多信息,请告诉我。

非常感谢

3 个答案:

答案 0 :(得分: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>

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

答案 1 :(得分:2)

你应该尝试这样的事情:

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

这适用于我!

答案 2 :(得分:0)

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