kendo-ui - Kendo DropDownList - 在 optionLabel 处添加类

Question

鉴于以下 Kendo 下拉列表，我想在 optionLabel 选择上添加一个类，因此当 ddl 展开时，我可以直观地区分选项标签和选项。理想情况下，这应该从 dataBound 完成，并且显然必须从 js 完成。我正在寻找一个奇特的解决方案，我真的不想遍历太多的 DOM。

http://trykendoui.telerik.com/@vojtiik/uLEc

      $("#products").kendoDropDownList({
                    dataTextField: "ProductName",
                    dataValueField: "ProductID",
                    optionLabel: "select",
                    dataBound: function(e) {
                        // find the option label and add class
                    },
                    dataSource: {
                        transport: {
                            read: {
                                dataType: "jsonp",
                                url: "http://demos.telerik.com/kendo-ui/service/Products",
                            }
                        }
                    }
                });

Answer 1

请尝试使用以下代码片段。

方法一:

<style type="text/css">
    #products_listbox li:first-child
    {
        background-color: Red !important;
        color: Yellow !important;
    }
</style>

注意:Products_list，此Products中是您的下拉列表ID。

方法2:

<script type="text/javascript">
    $(document).ready(function () {
        $("#products").kendoDropDownList({
                dataTextField: "ProductName",
                dataValueField: "ProductID",
                optionLabel: "select",
                open: function(e){
                        var listItem = $( "#products_listbox li:first-child" );
                        listItem.css( "background-color", "red" );
                        listItem.css( "color", "Yellow" );
                        },
                dataSource: {
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "http://demos.telerik.com/kendo-ui/service/Products",
                        }
                    }
                }
            });
    });
</script>

完成此操作后，我将尝试创建更通用的解决方案。我会更新你的。

注意:请使用方法1以获得更好的页面性能。