封装KendoDropDownList通用方法后点击选项报空指针错误求助

架构老林

2026-8-8

问题排查与修复方案

1. 通用函数中的语法错误

你的BindKendoDropDownListWOCV函数存在笔误：filter, filter,是无效的对象语法，应该改为filter: filter,。这个错误会导致下拉框的配置对象异常，进而引发后续的属性读取错误。

2. 重复初始化问题

原代码先执行$('#ctrlClassificationLevel').kendoDropDownList()完成了一次初始化，之后又调用通用函数再次执行kendoDropDownList()，重复初始化会导致组件内部状态混乱，这是引发报错的核心原因之一。

3. 索引参数的不当传递

调用通用函数时传入了index: null，Kendo DropDownList的index参数接收null会导致默认选中项为null，当点击选项时组件尝试读取选中项的Name属性，就会触发Cannot read properties of null错误。如果不需要设置默认选中索引，应传入undefined而非null。

修正后的代码

通用函数修正：

function BindKendoDropDownListWOCV(kendoDropDownId, textField, valueField, data, optionLabel, filter, suggest, index, value, changeFunction) {
    return kendoDropDownId.kendoDropDownList({
        dataTextField: textField,
        dataValueField: valueField,
        dataSource: data,
        optionLabel: optionLabel,
        filter: filter, // 修正语法错误
        suggest: suggest,
        index: index !== null ? index : undefined, // 处理null值，转为undefined
        change: changeFunction // 启用传入的change回调
    });
}

调用方式修正：

// 直接传入jQuery选择器对象，避免重复初始化
let ctrlClassificationLevel = BindKendoDropDownListWOCV(
    $('#ctrlClassificationLevel'), 
    'Name', 
    'Id', 
    data, 
    null, 
    'contains', 
    true, 
    undefined, 
    null, 
    undefined
);