DropDownBox中的极端多选列表

Question

我正在尝试使用DevExtreme jQuery构建多选下拉列表。我看了DevExpress网站上的演示，他们在DropDownBox内使用TreeView或Grid。修改该代码，这就是我写的内容：

$('#list1').dxDropDownBox({
showClearButton: true,
valueExpr: 'Value',
displayExpr: 'Text',
dataSource: new DevExpress.data.ArrayStore({
    data: source,
    key: 'Value'
}),
contentTemplate: function (e) {
    var value = e.component.option("Value"),
        $list = $("<div>").dxList({
            dataSource: e.component.option("dataSource"),
            valueExpr: 'Value',
            displayExpr: 'Text',
            showSelectionControls: true,
            selectionMode: "all",
            selectedItemKeys: value,
            onSelectionChanged: function (e) {
                var selectedKeys = e.component.option("selectedItemKeys");
                e.component.option("Value", selectedKeys);
            }
        });

    return $list;
},

}）;

源是具有两个属性的对象的数组（此处的文本和值相同，但有时可以不同）：

[{"Text":"2000","Value":"2000"},{"Text":"2005","Value":"2005"}]

该列表按原样显示，但是我有两个问题：

• 当我在列表中选择一个或多个项目时，所选项目的文本不会显示在下拉框中（在演示中，它以逗号分隔的文本显示。
• 我已将list1元素放入HTML表单（而不是DevExtreme表单），而且我不知道如何用表单发布所选值（甚至无法在jQuery中获取它们。

Answer 1

DevExtreme也有一个TagBox component-它是一个下拉列表编辑器，带有内部列表和开箱即用的多项选择。这将是一个更好的解决方案。

如果仍然要使用DropDownBox和List的组合，则问题出在

e.component.option("Value", selectedKeys);

DropDownBox没有“ Value”选项。您需要改为更改“ value”：

e.component.option("value", selectedKeys);

如果希望获取组件的值，则应使用此选项：

$('#list1').dxDropDownBox("instance").option("value");

参见：Widget Basics - Get and Set Options

Blockquote