如何使用具有不同字体大小的列表项创建 DropDownlist（Kendo UI for jquery）

Question

我想创建一个 Kendo UI（对于 jquery）DropDownList，其中包含一些列表项，以便每个列表项的字体大小都不同。假设 DropDownList 中有 3 个项目，那么这三个项目中的每一个都必须以不同的字体大小显示。可能吗？

Answer 1

当然，一种可能性是 return 数据源中的字体大小。

 var data = [
    { text: "Black", value: "1", fontSize: "12px" },
    { text: "Orange", value: "2", fontSize: "18px" },
    { text: "Grey", value: "3", fontSize: "24px" }
 ];

然后为 valueTemplate 和 template 使用 kendo DropDownList 模板：

$("#color").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    valueTemplate: '<label style="font-size: #:fontSize#">#:data.text#</label>',
    template: '<label style="font-size: #:fontSize#">#:data.text#</label>',
    dataSource: data,
    index: 0,
    change: onChange
});

这是 kendo 示例的修改版本：font size per item

如何使用具有不同字体大小的列表项创建 DropDownlist（Kendo UI for jquery）

How to create DropDownlist (Kendo UI for jquery) with list items having different font sizes

fonts

kendo-ui

drop-down-menu