通过JavaScript填充时的引导双列表框问题

我在使用Bootstrap Dual Listbox（）时遇到一些问题。当通过java脚本填充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>

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

---

非常感谢

我无法像普通下拉列表那样直接调用和填充函数来正确填充列表框。我更改了填充代码，如下所示

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

var demo2=$（'.eItems'）.bootstrapDualListbox({
nonselectedlistlabel:“未选定”，
selectedlistlabel:“已选”，
preserveselectiononmove:“已移动”，
moveonselect:false，
bootstrap2兼容：true
});
$（函数（）{
$（“#选择产品”）。更改（功能（）{
$（'#SelectItem'）.empty（）；
demo2.trigger（'bootstrapduallistbox.refresh'）；
$.getJSON（“/WEBAPP/MasterData/GetItems”，{productID:$（“#SelectProduct”）.val（）}，函数（数据）{
风险值项目；
$。每个（数据、功能（i、项）{
demo2.append（“+item.Key+”）；
});
demo2.trigger（'bootstrapduallistbox.refresh'）；
})
});
});

---

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

对我来说，

bootstrapDualListbox

区分大小写-

bootstrapDualListbox

不起作用
我想发布这篇文章，以防其他人有此问题。

您应该尝试以下内容：

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

---

这是我的作品

这并不是问题的真正答案，实际上javascript是区分大小写的，而不是

bootstrapDualListbox

[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 });
    }
}

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

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