Chrome最新版Kendo带模板下拉列表HTML生成异常问题咨询

问题概述 #

我在使用带自定义模板的Kendo DropDownList控件时遇到兼容性问题：模板包含带复选框的列表元素，代码如下：

<li class="k-item nowrap check-item">
<input type="checkbox" name="#= Name #" value="#= Name #" class="my-check-input" /><span> #= Name #</span>
</li> 

最新版Chrome中设置数据源后，生成的HTML结构不符合预期，控件无法正常工作，但Firefox运行正常。核心问题：带有role="option"属性的列表元素被错误地作为自定义模板中<li>的父元素，二者本应是同级关系。

修复方案 #

问题出在模板结构的错误使用：Kendo DropDownList会自动为每个数据源项生成带role="option"的<li>容器，如果自定义模板中再嵌套<li>标签，Chrome对这种嵌套列表的解析逻辑会导致结构异常。只需移除模板外层的<li>标签，保留复选框和文本内容即可：

修改后的模板代码：

<input type="checkbox" name="#= Name #" value="#= Name #" class="my-check-input" /><span> #= Name #</span>

如果需要为自动生成的选项容器添加自定义样式类，可以通过dataBound事件批量添加：

$("#your-dropdown-id").kendoDropDownList({
    dataSource: yourDataSource,
    itemTemplate: '<input type="checkbox" name="#= Name #" value="#= Name #" class="my-check-input" /><span> #= Name #</span>',
    dataBound: function() {
        this.items().addClass("nowrap check-item");
    }
});

原因说明 #

Kendo DropDownList的itemTemplate用于定义每个选项的内部内容，而非整个选项容器。框架会自动创建标准的选项容器（带role="option"的<li>），将模板内容插入其中。避免在模板中嵌套<li>，就能保证生成的HTML结构符合预期，消除浏览器兼容性差异。

内容的提问来源于stack exchange，提问作者Affan Sheikh