Jquery 下拉框中的Devextreme多选列表

我正在尝试使用devextremejquery构建一个多选下拉列表。我看过DevExpress网站上的演示，它们在下拉框中使用树状视图或网格。修改代码后，我写了以下内容：

$('#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;
},

列表显示了它应该显示的内容，但我有两个问题：

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

DevExtreme还有一个-它是一个下拉编辑器，里面有列表，还有一个开箱即用的多选功能。这将是一个更好的解决方案

如果您仍然希望使用DropDownBox和List的组合，则问题在于

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

DropDownBox没有“值”选项。您需要更改“”一个：

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

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

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

见：

大宗报价

---

此代码还有一个问题，即变量与变量“e”冲突。在onSelectionChanged回调中，函数的变量应更改为除“e”以外的其他变量，以避免名称与contentTemplate外部定义中的“e”定义冲突。下面是一个使用“arg”而不是“e”的示例：

onSelectionChanged: function (arg) {
    var selectedKeys = arg.component.option("selectedItemKeys");
    e.component.option("value", selectedKeys);
}

这样，“arg”现在指的是复选框列表中的选择，然后这些项目在父控件中正确显示，并用逗号分隔

此外，请参见DevExpress网站上的一个简单示例：

$（“#客户选择”）.dx下拉框（{
值：[]，
valueExpr:“值”，
占位符：“-”，
displayExpr：“文本”，
showClearButton：对，
数据源：JSON.parse（$（'#select custvend'）.val（），
contentTemplate:函数（e）{
var值=e.component.option（“值”），
$dataGrid=$（“”）。dxDataGrid（{
数据源：e.component.option（“数据源”），
列：[{dataField:“Text”，标题：“Customer（s）”}]，
hoverstatenabled:true，
分页：{enabled:false}，
filterRow:{visible:true}，
滚动：{模式：“无限”}，
身高：345，
选择：{mode:“multiple”}，
selectedRowKeys:值，
onSelectionChanged:函数（selectedItems）{
var keys=selectedItems.selectedRowKeys；
e、 选项（“值”，键）；
},  
宽度：“90%”
});  
dataGrid=$dataGrid.dxDataGrid（“实例”）；
e、 在“valueChanged”上，函数（args）{
var值=args.value；
dataGrid.selectRows（值，false）；
});  
返回$dataGrid；
}  
});  

url:'@url.Action（“GetTeam”、“Team”），
数据：{dept:0}，
成功：功能（数据）{
$（“#cbxTeam”）.dx下拉框({
占位符：@Json.Serialize（ViewData[“Choose Team”].ToString（）），
displayExpr:name，
showClearButton：对，
数据源：数据，
contentTemplate:函数（e）{
var值=e.component.期权（“价值”）；
$dataGrid=$（“”）。dxDataGrid({
数据源：e.component.option（“数据源”），
列：[名称，'g_ID']，
hoverstatenabled:true，
分页：{enabled:true，pageSize:10}，
filterRow:{visible:false}，
showColumnHeaders:错误，
滚动：{模式：“无限”}，
身高：265，
选择：{mode:“multiple”}，
selectedRowKeys:值，
onSelectionChanged:功能（selectedItems）{
var keys=selectedItems.selectedRowKeys；
e、 选项（“值”，键）；
}
});
dataGrid=$dataGrid.dxDataGrid（“实例”）；
e、 组件.on（“值更改”，函数（args）{
this.DefaultValueOne=args.value；
this.SelectedValues=args.value；
dataGrid.selectRows（args.value，false）；
txtTeam=“”；
如果（args.value！=null）{
对于（变量i=0；i

请阅读有关如何正确设置代码格式的帮助页面。

onSelectionChanged: function (arg) {
    var selectedKeys = arg.component.option("selectedItemKeys");
    e.component.option("value", selectedKeys);
}

$("#cust-select").dxDropDownBox({  
    value: [],  
    valueExpr: "Value",  
    placeholder: "-",  
    displayExpr: "Text",  
    showClearButton: true,  
    dataSource: JSON.parse($('#select-custvend').val()),  
    contentTemplate: function(e){  
        var value = e.component.option("value"),  
          $dataGrid = $("<div>").dxDataGrid({  
            dataSource: e.component.option("dataSource"),  
            columns: [{ dataField: "Text", caption: "Customer(s)" }],  
            hoverStateEnabled: true,  
            paging: { enabled: false },  
            filterRow: { visible: true },  
            scrolling: { mode: "infinite" },  
            height: 345,  
            selection: { mode: "multiple" },  
            selectedRowKeys: value,  
            onSelectionChanged: function(selectedItems){  
                var keys = selectedItems.selectedRowKeys;  
                e.component.option("value", keys);  
            },  
            width: "90%"  
          });  

        dataGrid = $dataGrid.dxDataGrid("instance");  

        e.component.on("valueChanged", function(args){  
            var value = args.value;  
            dataGrid.selectRows(value, false);  
        });  

        return $dataGrid;  
    }  
});  

    url: '@Url.Action("GetTeam", "Team")',
    data: { dept: 0 },
    success: function (data) {
        $("#cbxTeam").dxDropDownBox({
            placeholder: @Json.Serialize(ViewData["Choose Team"].ToString()),
            displayExpr: name,
            showClearButton: true,
            dataSource: data,
            contentTemplate: function (e) {
                var value = e.component.option("value");

                $dataGrid = $("<div>").dxDataGrid({
                    dataSource: e.component.option("dataSource"),
                    columns: [name, 'g_ID'],
                    hoverStateEnabled: true,
                    paging: { enabled: true, pageSize: 10 },
                    filterRow: { visible: false },
                    showColumnHeaders: false,
                    scrolling: { mode: "infinite" },
                    height: 265,
                    selection: { mode: "multiple" },
                    selectedRowKeys: value,
                    onSelectionChanged: function (selectedItems) {
                        var keys = selectedItems.selectedRowKeys;
                        e.component.option("value", keys);
                    }
                });

                dataGrid = $dataGrid.dxDataGrid("instance");
                e.component.on("valueChanged", function (args) {
                    this.DefaultValueOne = args.value;
                    this.SelectedValues = args.value;
                    dataGrid.selectRows(args.value, false);

                   
                    txtTeam = "";
                    if (args.value != null) {
                        for (var i = 0; i < args.value.length; i++) {
                            if (i == args.value.length-1) {
                                txtTeam += args.value[i].g_ID;
                            } else {
                                txtTeam += args.value[i].g_ID + ",";
                            }
                            
                        }
                    }
                    //console.log(txtTeam);
                });

                return $dataGrid;
            }