DevExtreme SelectBox无法通过JavaScript设置值问题求助

核心原因 #

问题出在值类型不匹配：

• 后台返回的SelectBox选项中，Value是字符串类型（比如"1"、"2"）
• 从DataGrid获取的data.Grup大概率是数字类型（枚举对应的int值，比如1）或枚举名称字符串（比如"Meyve"），和SelectBox的ValueExpr定义的类型不匹配，导致无法匹配到对应选项。

解决方案 #

方案1：前端统一值类型

如果data.Grup是数字类型，将其转为字符串后再赋值：

function OnSelectionChanged(selectedItems) {
    var data = selectedItems.selectedRowsData[0];
    // ...其他控件赋值代码...
    // 将数字转为字符串，匹配SelectBox的Value类型
    $("#Grup").dxSelectBox("instance").option("value", data.Grup.toString());
    // ...剩余代码...
}

方案2：修改后台返回值类型（推荐）

直接让后台返回数字类型的Value，避免前端额外转换：

public JsonResult GetStokGruplar()
{
    var stokGruplar = Enum.GetValues(typeof(EStokGrup)).Cast<EStokGrup>()
                    .Select(e => new 
                    {
                        Text = e.ToString(),
                        Value = (int)e // 改为int类型，而非字符串
                    }).ToList();

    DataSourceLoadOptions loadOptions = new DataSourceLoadOptions();
    var loadResult = DataSourceLoader.Load(stokGruplar, loadOptions);
    return Json(loadResult, JsonRequestBehavior.AllowGet);
}

修改后前端无需额外处理，直接赋值即可：

$("#Grup").dxSelectBox("instance").option("value", data.Grup);

方案3：处理枚举名称字符串的情况

如果data.Grup是枚举名称（比如"Meyve"），需要根据名称匹配对应的Value：

function OnSelectionChanged(selectedItems) {
    var data = selectedItems.selectedRowsData[0];
    var grupSelectBox = $("#Grup").dxSelectBox("instance");
    // 确保数据源加载完成后再匹配
    grupSelectBox.getDataSource().load().then(function(items) {
        var matchedItem = items.find(item => item.Text === data.Grup);
        if (matchedItem) {
            grupSelectBox.option("value", matchedItem.Value);
        }
    });
    // ...其他控件赋值代码...
}

额外排查点 #

• 先通过console.log(typeof data.Grup, data.Grup)确认data.Grup的类型和具体值，再针对性调整
• 检查SelectBox的数据源是否已加载完成，若赋值时数据源未加载，也会出现无法选中的情况，可通过getDataSource().load().then()确保数据源就绪

内容的提问来源于stack exchange，提问作者Emrah Çalışkan