Kendo DropDownList - 在 optionLabel 处添加类

Posted 2023-05-07

【中文标题】Kendo DropDownList - 在 optionLabel 处添加类

【英文标题】：Kendo DropDownList - add class at the optionLabel

【发布时间】：2014-06-01 12:39:12

【问题描述】：

鉴于以下 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",
                            
                        
                    
                );

【参考方案1】：

请尝试以下代码 sn-p。

方法一：

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

注意：Products_list，在此 Products 中是您的下拉 ID。

方法二：

<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>

一旦我完成了这个，我会尝试创建更通用的解决方案。我会更新你。

注意：请使用 method1 以获得更好的页面性能。

【讨论】：

有趣的是，我没有想到纯 css 唯一的解决方案 +1 ！我已将 @user3455199 的解决方案移动到 databound 中，它对我来说做得很好。 on change 或 open 发生得太频繁了，我只想在选项在打开之间没有变化时才这样做。谢谢，不用担心我已经排序的通用解决方案。

【参考方案2】：

您可以在更改事件中执行此操作.. 或者可能是任何其他方式.. 我认为这种方式很简单.. 您还可以找到选项标签而不是找到第一个孩子..

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

【讨论】：

对我来说看起来不错，我相信它也可以从 databound 工作，所以我不必一遍又一遍地添加课程。让我试试。谢谢@user3455199

你也可以将它用于数据绑定逻辑.. dataBound: function(e) var optionLabel = e.sender.list.find("li:first-child"); optionLabel.addClass("yourClass"); ,

【参考方案3】：

您可以使用 open 事件从 UL 中找到第一个 LI 元素并修改其样式。

例如

  open: function(e) 
    this.list.find(">ul>li:first").css("background", "red")
  

例如here。

【参考方案4】：

正如在这个问题上所说：Kendo UI [kendoDropDownList] - onSelect optionLable, add CSS class

不用玩open函数，用optionLabelTemplate即可实现：

$("#selectBox").kendoDropDownList(
    ...
    optionLabel: "Select",
    optionLabelTemplate:'<span style="color:red">Select</span>',
    ...
);

将 style="color:red" 替换为 class="yourClassName" ;-)