Question

鉴于以下Kendo下拉列表，我想在optionLabel select上添加一个类，所以当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是您的下拉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>

我将尝试创建更通用的解决方案。我会更新你的。

注意：请使用 method1 以获得更好的网页效果。

Answer 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",
                                }
                            }
                        }
                    });
                });

Answer 3

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

e.g。

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

示例here。

Answer 4

如该问题所述：Kendo UI [kendoDropDownList] - onSelect optionLable, add CSS class

无需使用开放功能，您可以使用 optionLabelTemplate 来实现：

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

将class =“ yourClassName”替换为style =“ color：red”;-）

Kendo DropDownList - 在optionLabel添加类

4 个答案: